html - 用溢出隐藏一半的 div 不起作用

Question

我已经使用溢出属性来制作我不想隐藏的 div 的一半，但整个 div 消失了。

.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>

我想隐藏绿色和红色两条线，只有溢出父 div 的扩展部分，但它们都被隐藏了

有什么帮助吗？

Answer 1

您想隐藏绿色和红色背景块，但想显示来自 div.des 的内容。正确的 ？你可以对那些 div 做 display:none 。如果不希望你可以通过移除高度来隐藏它们。如果我理解这一点是正确的。

height:0;

检查这个小提琴。

Answer 2

You want hidden overflow green and red background from .line div and this time nothing is showing so you need just fixed parent div ( .line ) width and height.

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