右浮动和容器 div答案

【问题标题】：Right Float and container div右浮动和容器 div
【发布时间】：2010-10-16 11:45:48
【问题描述】：

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

在每个 div 中，我都放置了不同高度的图像。然后有一个单独的 div 位于容器 div 的下方，它将是全宽（称为描述 div）。

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

注意：我试图在不使用任何绝对值的情况下执行此操作，仅使用百分比。所以我不想向容器 div 声明绝对高度！ clear's 也不起作用，因为这被简化了，实际上还有很多其他 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>

提前感谢您的帮助，尽量保留我头上的头发！

【问题讨论】：

看起来有人一直在大肆投票，并且对问题和所有答案都投了反对票。很奇怪。

标签： image html alignment containers nested

【解决方案1】：

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

你可以通过赋予它样式来强制一个元素位于任何浮动 div 之下：

clear: both;

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

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

【讨论】：

感谢 cmets，我正在努力让他们工作，看来我已经很接近了。如果我继续遇到问题，我会发布更详细的代码。 THnaks

【解决方案2】：

我完全同意 SpoonMeiser 的回答。我遇到了同样的问题（只有 IE 才会这样做）并添加了一个明确的说明：两者（在我的情况下为 div）是唯一可行的解决方案。

【讨论】：

【解决方案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>

希望对你有帮助？

【讨论】：

【解决方案4】：

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

【讨论】：