Question

我在容器div中有3个div。第一个是向左浮动，第二个是向右浮动，最后一个是在中心。这会在容器div上创建3个大致均匀的div。

在每个div中，我都会放置一个不同高度的图像。然后有一个单独的div坐在容器div下面，它将是整个宽度（称之为描述div）。

我希望容器div延伸到最大图像div的高度，以便描述div很好地位于图像下方。目前这适用于左浮动和中间div包含最大图像但不包含右浮动div。我不明白为什么或我错过任何帮助将不胜感激。

注意：我试图在不使用任何绝对值的情况下执行此操作，仅使用百分比。所以我不想声明容器div的绝对高度！同样清除将无法工作，因为这是简化的，并且实际上有很多其他div容器围绕所有这些等，除非你可以清除上面嵌套div中的浮点数。

以下是代码：

<html>
<head>
    <style>
        #b_pics {
            border: 2px solid grey;
            width: 100%;
        }
        #b_pic1 {
            border: 0px solid grey;
            float:left;
            width:33%;
        }
        #b_pic2 {
            border: 0px solid grey;
            margin: 0px auto;
            width: 33%
        }
        #b_pic3 {
            border: 0px solid grey;
            float:right;
            width:33%;
        }
        #b_website {
            border: 1px solid grey;
            width:100%;
        }
    </style>
</head>
<body>
    <div id='b_pics'>
        <div id='b_pic1'>
            Image 1 here    
        </div>
        <div id='b_pic3'>
            Image 3 here            
        </div>
        <div id='b_pic2'>
            Image 2 here                    
        </div>
    </div>
    <div id='b_website'>
        Line of text goes here
    </div>
</body>

提前感谢您的任何帮助，努力保留头发留下的任何头发！

Answer 1

包含元素不会伸展以容纳浮动div。在您的示例中，包含div没有实际内容，因此将为0像素高。尝试更改边框或背景颜色来说明这一点。

您可以通过为其指定样式强制元素位于任何浮动div之下：

clear: both;

您也可以清除左侧或右侧的浮动div。

您可以在具有该样式的三个图片div之后添加一个空div，以使b_pics容器拉伸以容纳浮动元素，或者您可以使b_website div清除。

Answer 2

我完全同意SpoonMeiser的回答。我有同样的问题（只有IE做）并添加一个清除：两者（在我的情况下为div）是唯一可行的解决方案。

Answer 3

SpoonMeiser的解释是正确的。以下是一些适合您的代码。基本上，我在容器div的末尾添加了一个空的div，其中包含“clear：both”。这会强制容器占用它包含的浮动div的空间。

这比使#b_website div“clear：both”（SpoonMeiser的替代建议）更好，因为这会使#b_website div显示在正确的位置，但不会强制#b_pics边框包围浮动div。 / p>

<div id='b_pics'>
    <div id='b_pic1'>
        Image 1 here</div>
    <div id='b_pic3'>
        Image 3 here
    </div>
    <div id='b_pic2'>
        Image 2 here
    </div>
    <div style="clear:both;"></div>
</div>
<div id='b_website'>
    Line of text goes here
</div>

我希望有帮助吗？

Answer 4

给this一个机会。没有什么是硬编码的，它应该做你想要的。

右浮动和容器div

4 个答案: