Question

我的网站存在问题

我有一个棕色背景的大<div>，它没有高度，里面有3 <div>个元素，那个大<div>不应该有绝对位置。

我尝试使用float修复此问题，但当我左/右浮动时，棕色背景不再可见！

以下是一个用于理解我的问题的简单代码：

<div id="bigDiv" style="background-color:brown"> 
    <div id="right"></div>
    <div id="midle"></div>
    <div id="left"></div>
</div>

Answer 1

您不需要浮动元素，只需使用display:inline-block;

即可

因为float对象基本上意味着你的盒子模型失去了它的高度值，因为它不再是相对于它的父级。如果你想使用浮动方法，请确保将<br class="clr-b">放在.clr-b { clear:both; }

Answer 2

这可能是浮动的原因。您可以通过将overflow:hidden;样式应用于您的大型div来解决您的问题。

否则，您可以使用clearfix method（明确：两者;）。

<div id="bigDiv" style="background-color:brown; overflow:hidden;"> 
    <div id="right"></div>
    <div id="midle"></div>
    <div id="left"></div>
</div>

Answer 3

你可以使用浮点数： http://jsfiddle.net/bKVuc/

#bigDiv {
    width: 100%;
    overflow: hidden;
}

#right, #midle, #left {
    float: left;
    width: 33.333%;
    height: 100px;
}

Answer 4

试试这个：

<div id="bigDiv" style="background-color:brown"> 
    <div id="right"></div>
    <div id="midle"></div>
    <div id="left"></div>

    <div style="clear:both;"></div>
</div>

您可以使用样式进行浮动：

<div style="clear:both;"></div>

Answer 5

如果大div浮动height:auto，则应该浮动该元素以填充大div。或者大div的行为就好像其中没有任何内容（height=0），因此背景消失。

在没有使用绝对位置的情况下，在一个大div内并排？

5 个答案: