Html 如何确保 DIV 拉伸以适合其内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1161166/
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 can I ensure a DIV stretches to fit its contents?
提问by hdx
I have this HTML with a table:
我有一个带有表格的 HTML：
<div
class="currentDesignDiv"
style="margin-bottom:5px;">
<div>
<img
alt="Thumbnail"
src="http://www.propertyware.com/templates/
<bean:write name="currentTemplate" property="primaryKey"/>
/thumb.gif"/>
</div>
<div>
<table>
<tr>
<th>Your Current Design: </th>
<td>Template #:
<bean:write name="currentTemplate" property="primaryKey"/>
</td>
</tr>
<tr>
<th>Last Updated: </th>
<td>
<bean:write name="currentTemplate" property="modifiedByAsString"/>
</td>
</tr>
<tr>
<th>Total Pages: </th>
<td>
<bean:write name="numberOfPages"/>
</td>
</tr>
</table>
</div>
Being styled by this CSS:
被这个 CSS 样式化：
.currentDesignDiv{
background-color:#e7e7e7;
border:1px solid #9c9c9c;
padding:5px;
width:100%;
min-width:860px;
}
.currentDesignDiv div{
float:left;
width:33%;
}
.currentDesignDiv div table{
font-size:9pt;
text-align:left;
margin:17px;
}
.currentDesignDiv div:first-child img{
margin:17px;
width:80px;
}
It looks OK on my big monitor, but when I change to my small monitor the right-most div, which has an image inside of it, floats outside of the parent div. Does anybody have a solution for that?
在我的大显示器上看起来不错，但是当我换到我的小显示器时，最右边的div，里面有一个图像，漂浮在 parent 之外div。有人有解决方案吗？
回答by Virat Kadaru
set
放
overflow: auto;
for the outer div. This should make your parent div expand even though its children have a float property. (IE has a few problems with this, but can be fixed by some padding)
对于外部 div。这应该使您的父 div 扩展，即使其子级具有浮动属性。（IE对此有一些问题，但可以通过一些填充来修复）
回答by Sir David of Lee
Perhaps try giving the outer div this css...
也许尝试给外部 div 这个 css ......
display: inline-block;
显示：内联块；
Since floated elements do not really have any layout of their own, the outer div just acts like an empty div, not stretching to fit the elements inside of it.
由于浮动元素实际上并没有任何自己的布局，因此外部 div 就像一个空的 div，不会拉伸以适应其中的元素。
Making the outer div inline-block will essentially make the inner divs take up some actual space in the outer div.
使外部 div 内联块实质上将使内部 div 占据外部 div 中的一些实际空间。
回答by fluidbrush
I usually give:
我通常给：
overflow:hidden;
溢出：隐藏；
I had a problem when i give overflow:auto;sometimes the outer div may display scrollbar.
当我给出溢出时我遇到了问题：自动；有时外部 div 可能会显示滚动条。
回答by edeverett
Float the parent div too.
也浮动父div。
This will mean that child elements that are floated won't float out of it.
这意味着浮动的子元素不会从其中浮动。
回答by SHymans
Here's a modified solution which helped me arrange 3 divs with image backgrounds and absolute text in a 100% width layout.
这是一个修改后的解决方案，它帮助我在 100% 宽度布局中排列 3 个带有图像背景和绝对文本的 div。
<html>
<head>
<style>
#wrapper {position:relative; float:left; width:100%; height:50px; margin:50px 0 50px 0; background:#000;}
.box-fit {max-width:30%; height:100%; display:inline-block;}
#one {position:absolute; width:100px; height:50px; left:0; background:#2aa2fd;}
#two {position:absolute; width:100px; height:50px; left:50%; transform:translateX(-50%); background:#d4a900;}
#three {position:absolute; width:100px; height:50px; right:0; background:#a7ca48;}
.box-text {position:absolute; width:auto; height:auto; font-size:1em; color:#636363; left:10px; bottom:4px;}
</style>
</head>
<body>
<div id='wrapper'>
<div id='one' class='box-fit'>
<div class='box-text'>
Text for div one!
</div>
</div>
<div id='two' class='box-fit'>
<div class='box-text'>
Text for div two!
</div>
</div>
<div id='three' class='box-fit'>
<div class='box-text'>
Text for div three!
</div>
</div>
</div>
</body>
</html>
