浮点问题 - Css

我想创建一个可变高度的div。看起来，如果div的可变高度div内部设置为float:left可变高度div得到0的高度。如果我设置变量高度div float:left div随其中的内容增长，但现在可变高度div被发送到屏幕左侧而不是中心。如何让主div保持在中心位置，但是它还会随着它的子div的增长而增长？浮点问题 - Css

来源

2011-06-14 Lumpy

到目前为止，你有什么代码明智吗？ – ngen 2011-06-14 16:31:47

溢出：隐藏在父div上就够了 – lipelip 2011-06-14 16:33:51

添加overflow: auto;到主DIV将保持它为中心，同时也将迫使它来包装它里面的元素周围。对浮动属性overflow属性两个伟大的文章可以在这里找到：http://css-tricks.com/all-about-floats//http://css-tricks.com/the-css-overflow-property/

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

来源

2011-06-14 17:04:06 Wex

<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：两者都是。

来源

2011-06-14 16:32:06 Pantelis

这正是我所需要的，谢谢！ – Lumpy 2011-06-14 16:37:33

但创建一个额外的元素是多余的。 – Sotiris 2011-06-14 16:49:25

在某些情况下，这可能是多余的。但是，如果你没有指定宽度的元素，那么它不会在IE6上工作。有时必须指定一个宽度值，或者甚至将溢出设置为隐藏（这是为了其他更明显的用途） - 可能会混淆现有的布局，并最终导致更大的麻烦。 – Pantelis 2011-06-14 17:06:47

浮动divs从文档的“流”中被删除。可以强制div容器完全包围它的内容，即使他们是浮动的，后来通过使用清除元件：

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

有更好的方法的详细here。

来源

2011-06-14 16:33:01

对于主DIV，包括这些CSS规则：

margin: 0 auto; 
overflow: auto;

还要确保你有一个主要的div一个min-height和width属性集。

编辑：我也包括溢出属性。

来源

2011-06-14 16:34:38 itsols

add overflow:hidden or overflow:scroll or overflow:auto for the parent div。

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

来源

2011-06-14 16:36:23 Sotiris

浮点问题 - Css

回答

相关问题