考虑一个页面(下面有完整的源代码):
包含div的样式,使其边框可见。
包含的框,其内容不能小于特定的宽度。在这里,我们将使用图像。
如下所示,并且按预期方式,div“包含”图像:
但是,如果使浏览器窗口更小,则会达到它不足以容纳图像的位置:图像的一部分将不可见,并且浏览器需要添加滚动条。到目前为止,一切都很好。但是,div的大小仍然基于视口的宽度,因此图像超出了div的范围:
相反,我想让div始终“围绕”图像,并且如果不能使包含框变窄,则使其变宽。有趣的是,这正是在IE8渲染的Quirks模式下发生的事情:
通过添加CSS,我如何获得与IE8在Quirks中完全相同的结果,但是在标准模式下?供参考,这里是此示例的完整源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Styling */
div { background-color: #999 }
body { font-family: sans-serif }
div { margin: .5em 1em; padding: .5em }
</style>
</head>
<body>
<div>
<img src="http://placekitten.com/g/400/100"/>
</div>
</body>
</html>
最佳答案
尝试这个:
CSS:Old answer, Truncated
HTML:Old answer, Truncated
Demo
编辑:
经过大量的修改,这是我可以想到的:
CSS:
.table {
display:table;
background-color: #999;
width:90%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
margin: .5em 1em;
padding: .5em
}
HTML:
<div class="table">
<div class="row">
<div class="cell">
<img src="http://placekitten.com/g/400/100"/>
</div>
</div>
</div>
伴随的小提琴:http://fiddle.jshell.net/andresilich/Q4VnF/
关于html - 如何让盒子根据其内容增加尺寸?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7368153/