0

我有 HTML，如 http://jsfiddle.net/Lijo/SCYVN/4/所示。

有蓝色边框的“optionLine”类。但是当没有设置溢出时，边框没有按预期工作。设置溢出时它工作正常。

  1. 为什么在这种情况下必须溢出？

  2. 有什么方法可以让它工作而不会溢出？

代码

.optionLine
{
display:block;
border: 1px solid blue;
/*overflow:auto;*/
}

参考：

  1. 动态添加div时父div不调整高度
4

5 回答 5

4

边框无法正常工作，因为带有边框的元素的子元素是浮动的。

需要清除浮动元素以使其容器具有正确的预期尺寸。

有关clearfix 信息，请参见此处

这个SO question对于不同的情况也有一些非常详细的解释和解决方案。最近display:table经常用这个方法...

于 2012-09-20T07:46:51.323 回答
2

试试这个http://jsfiddle.net/SCYVN/6/

.optionLine
{
    display: table;
    border: 1px solid blue;
    /*overflow:auto;*/
    width:100%;
}
于 2012-09-20T07:54:37.147 回答
1

放下它float:left;，.optionItem它将被修复。如果您不想这样做，则必须在（对于每一行浮动项目）和浮动项目之后添加一个包装器clear: both;...

但添加overflow: auto;始终是最好的方法。

于 2012-09-20T07:51:04.437 回答
1

因为您的物品（在容器内）是浮动的。浮动项目超出了文档的正常流程；您需要清除它们的浮动（通过在容器上使用 overflow: auto 或添加另一个具有 clear: left 或 clear: 都指定的元素）以捕捉文档的流回。

于 2012-09-20T07:47:06.470 回答
-1

您需要为大纲 div 设置宽度和高度

前任：

border: blue 1px solid;
width:500px;
height:50px;
于 2012-09-20T08:00:19.713 回答