未设置溢出时,Div高度不正确

时间:2012-09-20 07:44:47

标签: html css

我有http://jsfiddle.net/Lijo/SCYVN/4/中显示的HTML。

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

  1. 为什么在这种情况下强制溢出?

  2. 任何使其无溢出工作的方法吗?

  3. CODE

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

    参考:

    1. Parent Div does not adjust height when adding div dynamically

5 个答案:

答案 0 :(得分:4)

边框无法正常工作,因为带边框的元素的子元素已浮动。

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

有关明确修复信息,请参阅here

SO question还针对不同情况提供了一些非常详细的解释和解决方案。最近我经常使用display:table方法......

答案 1 :(得分:2)

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

.optionLine
{
    display: table;
    border: 1px solid blue;
    /*overflow:auto;*/
    width:100%;
}

答案 2 :(得分:1)

因为您的物品(在容器内)是浮动的。浮动物品在文件的正常流动之外;你需要清除它们的浮动(通过在容器上使用overflow:auto,或者添加另一个具有clear:left或clear:两者都指定的元素)来捕获文档的流回。

答案 3 :(得分:1)

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

但添加overflow: auto;始终是最佳方式。

答案 4 :(得分:-1)

您需要为轮廓div设置宽度和高度

例如:

border: blue 1px solid;
width:500px;
height:50px;