CSS 如何使 div 垂直扩展以将内容包裹在其中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2614619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div expand vertically to wrap the content within it?
提问by MalcomTucker
I have a div which wraps a number of images that are generated dynamically. I don't know how high the list of images is. My problem is the div that contains the dynamically generated images doesn't behave like it is housing any content - I want it to extend to the height of the list of images. Each image is itself wrapped in a div.
我有一个 div，它包装了许多动态生成的图像。我不知道图像列表有多高。我的问题是包含动态生成的图像的 div 的行为不像它包含任何内容 - 我希望它扩展到图像列表的高度。每个图像本身都包裹在一个 div 中。
This is the wrapper div:
这是包装器 div：
.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
This is the markup dynamically generated for (one of) the images:
这是为（其中一个）图像动态生成的标记：
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div>
.....
How do I get the blockdiv to extend down with the images?
如何让blockdiv 与图像一起向下延伸？
Thanks
谢谢
回答by wsanville
The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your blockdiv does not extend the full height of your image.
当您浮动一个元素时，您观察到的问题就会发生，这会将它从元素的正常流中移除（正常流是指元素在没有样式的情况下出现的方式）。当您浮动一个元素时，仍在正常流程中的其他元素将简单地忽略它并且不为它腾出空间，这就是为什么您的blockdiv 不会扩展图像的整个高度。
There are a few different solutions:
有几种不同的解决方案：
1) Add the rule overflow: hidden;to the blockclass:
1）overflow: hidden;在block类中添加规则：
.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
2) Add a element after your image that clears the floating:
2）在清除浮动的图像后添加一个元素：
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
<div style="clear: both;"></div>
</div>
Both will work, but I prefer the first solution.
两者都可以，但我更喜欢第一个解决方案。
回答by Otto Kanellis
REMOVE float:leftfrom Image style and height:Autofrom block style
float:left从图像样式和height:Auto块样式中移除
ADD display:inline-block;in block style (container style)
添加display:inline-block;块样式（容器样式）
回答by Otto Kanellis
I had the same problem. I got the wrapper element to wrap the content by setting the wrapper element's display to "table". So for your situation try
我有同样的问题。我通过将包装器元素的显示设置为“表格”来获得包装器元素来包装内容。所以对于你的情况试试
.block {padding:10px; margin-top:10px; height:auto; background- color:#f9f9f9; display: table;}
回答by remi
Add this in your CSS file:
在你的 CSS 文件中添加：
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */
And add the "group" class to your blockdiv so the float is cleared:
并将“ group”类添加到您的blockdiv 中，以便清除浮动：
<div class="block group">
...
回答by Kyra
I have a div tag that expands (horizontally and vertically) depending what I have in it. I have:
我有一个 div 标签，它根据我的内容展开（水平和垂直）。我有：
<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right">
I also put a table within it to hold all my information:
我还在里面放了一张桌子来保存我的所有信息：
<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">
