右浮动和容器div

Question

我的容器div中有3个div。 第一个向左浮动，第二个向右浮动，最后一个位于中间。 这将在容器div上创建3个大约偶数的div。

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

我希望容器div延伸到最大图像div的高度，以便描述div恰好位于图像下方。 当前，这在左浮动div和中间div包含最大图像而不是右浮动div时有效。 我不明白为什么或我缺少任何帮助将不胜感激。

注意：我正在尝试不使用任何绝对值而只使用百分比来执行此操作。 因此，我不想为容器div声明绝对高度！ 另外clear不会起作用，因为它被简化了，实际上所有其他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的末尾添加了一个带有“ clear：both”的空div。 这迫使容器占用其所包含的浮动div的空间。

这比将#b_website div设置为“ clear：both”（SpoonMeiser的替代建议）要好，因为那样会使#b_website div显示在正确的位置，但不会强制#b_pics边框围绕浮动div。

<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

试一下。 没什么硬编码的，它应该做您想要的。

右浮动和容器div

问题描述

4 个解决方案

解决方案1
1 2009-03-30 21:22:05

解决方案2
0

解决方案3
0 2013-07-30 11:48:10

解决方案4
-1 2009-03-30 21:20:19

右浮动和容器div

问题描述

4 个解决方案

解决方案1 1 2009-03-30 21:22:05

解决方案2 0

解决方案3 0 2013-07-30 11:48:10

解决方案4 -1 2009-03-30 21:20:19

解决方案1
1 2009-03-30 21:22:05

解决方案2
0

解决方案3
0 2013-07-30 11:48:10

解决方案4
-1 2009-03-30 21:20:19