并排的divs

Question

我在父div中有4个div。为了让它们并排出现，我给了所有4个div一个带浮动的样式：左边。 div确实并排显示，但父div的高度不会增长到包含子div的高度。我错过了什么？

Answer 1

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

clearfix方法的优点是允许特定定位的元素在父容器外“挂起”，如果你需要它们，可能需要额外的CSS和标记。这是我喜欢的方法，因为我经常使用悬挂元素。

Answer 2

在父div上设置overflow: hidden;。

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

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

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

Answer 3

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

Answer 4

millinet的答案是可行的，或者你可以浮动父div，这也允许它扩展以包含其内容

Answer 5

我认为你应该给父div一个100％的高度而不是固定的，这样它就会包含子div的高度。

Answer 6

我也推荐使用clearfix方法。出现此问题的原因是浮动元素会删除它通常包含的任何高度。

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

Answer 7

如果你想让divs并排，你可以尝试使用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>