0

我在一个容器 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>

在此先感谢您的帮助，尽量保留我头上的头发！

4

4 回答 4

1

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

您可以通过赋予其样式来强制元素位于任何浮动 div 之下：

clear: both;

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

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

于 2009-03-30T21:22:05.710 回答
0

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>

我希望这有帮助吗？

于 2013-07-30T11:48:10.450 回答
0

我完全同意 SpoonMeiser 的回答。我遇到了同样的问题（仅使用 IE）并添加了一个明确的说明：两者（在我的情况下为 div）是唯一似乎有效的解决方案。

于 2009-11-05T07:08:26.880 回答
-1

试一试。_ 没有什么是硬编码的，它应该做你想做的事。

于 2009-03-30T21:20:19.913 回答