考虑一个页面(下面有完整的源代码):


包含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/

10-09 15:05
查看更多