Question

使用overflow：hidden时，就是这样。我有没有可以删除溢出？例如，如果你隐藏了一个div的溢出，然后在它下面直接有另一个div，溢出将使第二个div保持在第一个div的正下方，它将有一个隐藏溢出的空白空间。您可以在我的示例JSFiddle中看到这一点：http://jsfiddle.net/ZdvYg/

HTML：

<div id="id1">
    <p>This is text</p>
    <p>This is more text</p>
</div>
<div id="id2">
    <p>This is text</p>
    <p>This is more text</p>
</div>

CSS：

#id1 {
    background-color:red;
    height: 40px;
    overflow: hidden;
}

#id2 {
    background-color:yellow;
}

在JSFiddle中，我想删除“这是更多文本”的空格，因此背景颜色应该是触摸的。

Answer 1

段落边距/填充按下元素。删除边距/填充以消除空间：

http://jsfiddle.net/ZdvYg/1/

你也可以添加一个浮动并清除DIV以解决问题：

http://jsfiddle.net/ZdvYg/2/

#id1 {
    background-color:red;
    height: 40px;
    overflow: hidden;
    float: left; 
    width: 100%;
    clear: both;
}

Answer 2

您至少有3种方法可以解决这个问题：

将段落上的边距重置为零

http://jsfiddle.net/ZdvYg/5/
```
p {margin:0}
```
在div上设置垂直填充

http://jsfiddle.net/ZdvYg/6/
```
div {padding:1px;}
```
在div上设置边框

http://jsfiddle.net/ZdvYg/7/
```
div {border:solid transparent 1px;}
```

最后摆脱溢出（如果真的需要隐藏的话，不是一个真正的好主意）

在前面回流div绘图

http://jsfiddle.net/ZdvYg/8/

    div {position:relative;/* brings div to top layer at screen */}

完全删除<div> overflow </div>

2 个答案: