Question

我正在尝试创建一个可变高度div。似乎变量高度div内的div设置为float:left变量height div的高度为0.如果我设置变量height div float:left，则div会随着其中的内容而增长但现在变量高度div被发送到屏幕的左侧而不是中心。我如何保持主要div在中心，但也让它与它的孩子div一起成长？

Answer 1

<div id="VariableHeightDiv">
    <div class="child floatLeft"></div>
    <div class="child floatLeft"></div>
    <div class="child floatLeft"></div>

    <div class="clear"></div>
</div>

并在你的CSS中的 .clear {明确：两者;}

您需要清除浮动，否则浏览器无法理解并正确计算容器div的高度。这就是为什么最后我们添加一个清晰的空div：两者。

Answer 2

将overflow: auto;添加到主div将使其保持居中，并且还会强制它包围其内部的元素。关于float属性和溢出属性的两篇很棒的文章可以在这里找到：http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/

我不建议使用<div style="clear: both;">技术，因为这是不必要的额外标记，并且不会向演示文稿添加任何内容。

Answer 3

浮动div在某种程度上从文档的“流程”中删除。您可以强制容器div完全包围其内容，即使它们已经浮动，之后使用清除元素：

<div>
   <div style="float: left">blah blah</div>
   <br style="clear: both" />
</div>

有更好的方法详细here。

Answer 4

对于主div，请包含以下CSS规则：

margin: 0 auto;
overflow: auto;

还要确保您为主div设置了min-height和width属性。

编辑：我也包含了溢出属性。

Answer 5

为父div添加overflow:hidden或overflow:scroll或overflow:auto。

更多信息http://www.quirksmode.org/css/clearing.html

示例：http://jsfiddle.net/MbgH4/1

浮点问题 - Css

5 个答案: