并排div

Question

我有一个父div的4个div。为了让它们并排出现，我给了所有4个div一个float：left的样式。 div并排显示，但父div的高度不会增长到包含子div的高度。我错过了什么？

Answer 1

4个div后，您需要“取消”浮动样式。 这是通过创建p完成的，例如：<p style="clear: both"></p> 您的父div将自动获得正确的大小。

Answer 2

我认为你应该给父母div 100％的高度不固定，以便它包含子div的高度，如果它们增长的话。

Answer 3

在父div上设置overflow: hidden;。

说明：浮动元素将它们从常规文档流中移除。因此，如果一个给定的元素只包含浮动元素，它将不会有任何高度（或者扩展宽度 - 除非它具有默认的块元素的隐式宽度）。

将overflow属性设置为hidden将告诉父元素尊重其子元素的宽度，但隐藏所有超出其宽度和高度的元素。

当然，另一种选择是在浮动的div后面添加一个元素在父级内，使用clear: both;这使最后一个元素位于常规文档流内的所有浮动元素之后。由于它位于父项内部，父项的高度是浮动项目的高度，以及常规填充和已清除项目的高度。

Answer 4

这是浮点元素实现的一个怪癖原因，当您有一个只包含浮动子元素的父元素时，会发生这种情况。有两种方法可以解决它。一种是将父元素的overflow属性设置为hidden，有时称为溢出方法。另一个被称为clearfix method，并且涉及使用伪类的:after。

clearfix方法的优点是允许特定位置的元素在父容器外面“挂起”，如果您需要它们，则会牺牲一些额外的CSS和标记。这是我喜欢的方法，因为我经常使用悬挂元素。

Answer 5

Millinet公司的回答会工作，或者你可以浮在父DIV这也将允许它扩展到包含其内容

Answer 6

我推荐clearfix方法为好。发生此问题是因为浮动元素将删除它通常包含的任何高度。

PositionIsEverything posts a complete explanation以及IE6的相应解决方案，因为：旧选择器之后不支持伪选择器。

Answer 7

如果你想的div是并排的一面，你可以尝试使用inline-block的：

<style> 
    .alldivs { 
     display: inline-block; 
    } 
</style> 

<div id="wrapper"> 
    <div id="div1" class="alldivs"></div> 
    <div id="div2" class="alldivs"></div> 
    <div id="div3" class="alldivs"></div> 
    <div id="div4" class="alldivs"></div> 
</div>