Html 即使里面有内容，Div 也不会扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5774315/
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
Div not expanding even with content inside
提问by Aiden Ryan
I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.
我有一堆彼此内部的 div，所有这些都有一个仅指定 CSS 的 ID。
But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)
但是由于某种原因，周围的 DIV 标签只会扩展到它的指定高度值，而不是默认的自动，这意味着虽然内容在里面，但支持 DIV 只是一个特定的高度。我需要它来将高度调整到它里面任何东西的大小（因为用户提交的数据可能会在 500 多个字的段落中被回显出来。）
#albumhold {
width: 920px;
padding: 10px;
height: auto;
border: 1px solid #E1E1E1;
margin-left: auto;
margin-right: auto;
background-color: #E1E1E1;
background-image: url(../global-images/albumback.png);
background-position: top center;
background-repeat: repeat-x;
}
#albumpic {
display: block;
height: 110px;
width: 110px;
float: left;
border: 1px solid #000;
}
#infohold {
width: 800px;
background-color: #CCC;
float: right;
height: 20px;
}
#albumhead {
width: 800px;
height: 20px;
text-indent: 10px;
border: 1px solid #000;
color: #09F;
}
#albuminfo {
margin-top: 5px;
width: 800px;
float: right;
color: #09F;
word-wrap: break-word;
}<div id="albumhold">
<div id="albumpic">Pic here</div>
<div id="infohold">
<div id="albumhead">Name | Date</div>
<div id="albuminfo">Information</div>
</div>
</div>Help is greatly appreciated.
非常感谢帮助。
回答by Paul D. Waite
Floated elements don't take up any vertical space in their containing element.
浮动元素不占用其包含元素中的任何垂直空间。
All of your elements inside #albumholdare floated, apart from #albumhead, which doesn't look like it'd take up much space.
里面的所有元素#albumhold都是浮动的，除了#albumhead，看起来不会占用太多空间。
However, if you add overflow: hidden;to #albumhold(or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.
但是，如果您添加overflow: hidden;到#albumhold（或其他一些 CSS 以清除其中的浮动），它将扩展其高度以包含其浮动子项。
回答by Mahendra Liya
There are two solutions to fix this:
有两种解决方案可以解决此问题：
- Use
clear:bothafter the last floated tag. This works good. - If you have fixed height for your div or clipping of content is fine, go with:
overflow: hidden
clear:both在最后一个浮动标签之后使用。这很好用。- 如果您的 div 高度固定或内容剪裁很好，请使用：
overflow: hidden
回答by sym3tri
回答by Sébastien Gicquel
Add <br style="clear: both" />after the last floated div worked for me.
<br style="clear: both" />在最后一个浮动 div 为我工作之后添加。
回答by Debbie
Putting a <br clear="all" />after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}
<br clear="all" />在最后一个浮动的 div 之后放一个对我来说效果最好。感谢 Brent Fiare 和 Paul Waite 提供的信息，浮动 div 不会扩展父 div 的高度！这让我发疯了！;-}
回答by Dan Blows
You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.
你在 .infohold 上有一个固定的高度，所以 .albumhold div 只会加上 .infohold (20px) + .albumpic (110px) 的高度加上我没有包含在那里的任何填充或边距。
Try removing the fixed height on .infohold and see what happens.
尝试删除 .infohold 上的固定高度，看看会发生什么。
回答by Axel K?hler
You didn't typed the closingtag from the div with id="infohold.
您没有从id="infohold的 div 中输入结束标签。
回答by Mohamed Badr
div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.
如果内部有其他浮动 div，div 将不会扩展，因此从内部 div 中删除浮动，它会扩展。
