右浮动和容器 div

发布于 2024-07-17 01:22:49 字数 1540 浏览 6 评论 0原文

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

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

预先感谢您的帮助，努力保留我头上剩下的头发！

原文

I have 3 divs in a container div. The first is floated left, the second is floated right and the last sits in the center. This creates 3 approximately even divs across a container div.

In each of these divs I am placing an image of varying heights. Then there is a separate div to sit below the container div which will be the full width (call it description div).

I want the container div to stretch to height of largest image div so that the description div sits nicely underneath the images. Currently this works when the left floated and middle divs contain the largest image but not for the right floated div. I cannot see why or what i'm missing any help would be much appreciated.

NOTE: I'm trying to do this without using any absolute values, just percentages. So I don't want to declare an absolute height to the container div! Also clear's will not work as this is simplified and there are actually a lot of other div containers around all of this etc, unless you can clear just the floats in the above nested div.

Here's the code:

<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>

Thanks in advance for any help, trying to keep any hair thats left in my head!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

燕归巢 2024-07-24 01:22:49

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

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

clear: both;

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

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

A containing element won't stretch to accommodate floating divs. In your example, the the containing div has no actual content and will thus be 0 pixels high. Try changing the border or background colour to illustrate this.

You can force an element to be below any floating divs by giving it the style:

clear: both;

You can also clear just left or right floating divs.

You can add an empty div after your three picture divs that has that style, to make the b_pics container stretch to accommodate the floating elements, or you could just make the b_website div clear both.

回复收藏 0 原文

楠木可依 2024-07-24 01:22:49

我完全同意 SpoonMeiser 的回答。我遇到了同样的问题（仅适用于 IE）并添加一个明确的：both（在我的情况下是 div）似乎是唯一可行的解决方案。

回复收藏 0 原文

给妤﹃绝世温柔 2024-07-24 01:22:49

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>

我希望这有帮助吗？

SpoonMeiser's explanation is correct. Here is some code that should work for you. Essentially, I've added an empty div with "clear:both" at the end of your container div. This forces the container to take up the space of the floating divs it contains.

This is better than making the #b_website div "clear:both" (SpoonMeiser's alternative suggestion) because that would make the #b_website div display in the correct place but would not force the #b_pics border to surround the floating divs.

<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>

I hope that helps?

回复收藏 0 原文