隐藏溢出的一半div is'nt working

我已经使用溢出属性来使我不想隐藏的div的一半，但整个div都没有了。隐藏溢出的一半div is'nt working

.line { 
    position: relative; 
    overflow: hidden; 
} 

.gl { 
    position: absolute; 
    right: 10px; 
    width: 100%; 
    height: 5px; 
    background-color: green; 
    display: block; 

} 

.rl { 
    position: absolute; 
    width: 100%; 
    left: 30px; 
    height: 5px; 
    background-color: red; 
    display: block; 
}

这HTML代码

<div class='m1'> 
     MAIN 1 
     <div class='line'><div class="rl"></div><div class='gl'></div> 
     </div> 
     <div class='des'>kasjfnkvanj</div> 
</div>

我想隐藏绿色和红色两条线，只有延长该溢出父格但他们都得到隐藏

任何帮助一部分？

来源

2013-03-19 Majed DH

是这样的：http://jsfiddle.net/ZMD5N/？ – Horen 2013-03-19 20:10:24

这就是我想要的，我刚刚在css上添加了3行： .m1 { width：60px; } 它和我想要的一样，但在浏览器中它不是 – 2013-03-19 20:40:26

你想从.line div隐藏溢出绿色和红色背景，这一次没有任何显示，所以你只需要修正父div（.line）的宽度和高度。

.line { 
    position: relative; 
    overflow: hidden; 
    width:100px; height:10px; 
}

来源

2013-03-19 20:36:37 user1557618

你想要隐藏绿色和红色的背景块，但要显示div.des中的内容。对？您可以对这些div执行display：none。如果不希望你可以通过去除高度隐藏它们。如果我理解这个权利。

height:0;

检查这个fiddle。

来源

2013-03-19 20:25:28 crazyrohila

@crazyhila不，我想隐藏部分gl和rl div，它们不在.m1 div – 2013-03-19 20:36:23

那么您必须为.m1定义宽度/高度div和overflow：隐藏它。所以当这个.m1div里面有更大的东西（宽度/高度）时，只会显示.m1 div的大小，溢出的部分会被隐藏。 [检查这个小提琴]（http://jsfiddle.net/ZMD5N/6/）尝试删除.link也会看到红色部分。因为现在链接是120px，而.m1是100px，所以20px是隐藏的。 – crazyrohila 2013-03-19 20:45:46

隐藏溢出的一半div is'nt working

回答

相关问题