Image 右浮动和容器分区
在容器div中有3个div。第一个是左浮动的，第二个是右浮动的，最后一个位于中间。这将在容器div中创建3个大致相等的div 在每个分区中，我放置了一个不同高度的图像。然后在容器div下面有一个单独的div，它将是全宽的（称为description div） 我希望容器div延伸到最大图像div的高度，以便描述div正好位于图像下方。目前，当左浮动和中间的div包含最大的图像时，这种方法可以工作，但对于右浮动的div则不行。我不明白为什么或者我缺少了什么。非常感谢您的帮助 注意：我尝试在不使用任何绝对值的情况下执行此操作，仅使用百分比。所以我不想声明容器div的绝对高度！此外，清除将不起作用，因为这是简化的，并且实际上在所有这些等周围都有许多其他div容器，除非您可以只清除上面嵌套div中的浮动 代码如下：Image 右浮动和容器分区,image,html,alignment,containers,nested,Image,Html,Alignment,Containers,Nested,在容器div中有3个div。第一个是左浮动的，第二个是右浮动的，最后一个位于中间。这将在容器div中创建3个大致相等的div 在每个分区中，我放置了一个不同高度的图像。然后在容器div下面有一个单独的div，它将是全宽的（称为description 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>
#b_图片{
边框：2倍纯色灰色；
宽度：100%；
}
#b_pic1{
边框：0px纯灰；
浮动：左；
宽度：33%；
}
#b_pic2{
边框：0px纯灰；
保证金：0px自动；
宽度：33%
}
#b_pic3{
边框：0px纯灰；
浮动：对；
宽度：33%；
}
#b_网站{
边框：1px纯灰；
宽度：100%；
}
图1在这里
图3在这里
图2在这里
一行文字放在这里
提前感谢您的帮助，尽量保留我头上的头发 试试看。没有任何东西是硬编码的，它应该做你想做的。包含的元素不会拉伸以容纳浮动div。在您的示例中，包含的div没有实际内容，因此将为0像素高。尝试更改边框或背景颜色来说明这一点 通过为元素指定以下样式，可以强制其位于任何浮动div之下：
clear: both;
<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>
您可以在具有该样式的三个图片div之后添加一个空div，以使b_pics容器拉伸以容纳浮动元素，或者您可以将b_网站div两者都清除。我完全同意Spoonmiser的回答。我也遇到了同样的问题（仅在IE do中），并添加了一个明确的选项：两者（在我的例子中是div）都是唯一有效的解决方案。Spoonmiser的解释是正确的。下面是一些应该适合您的代码。基本上，我在容器div的末尾添加了一个空div，并带有“clear:tware”。这会迫使容器占用它所包含的浮动div的空间 这比将#b#u website div设置为“clear:tware”（Spoonmiser的替代建议）要好，因为这样可以使#b#u website div显示在正确的位置，但不会强制#b#u 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>
图1在这里
图3在这里
图2在这里
一行文字放在这里
我希望这能有所帮助？谢谢你的评论，我正在努力让它们发挥作用，似乎我已经很接近了。如果我继续遇到问题，我会发布更详细的代码。THnaksLooks看起来像是有人在疯狂地投反对票，对问题和所有答案都投了反对票。奇怪的