Question

考虑一下您所拥有的页面（完整来源）：

包含div的样式，使其边框可见。
包含的盒子，其内容不能小于某个宽度。在这里，我们将使用图像。

这将呈现如下，并且正如预期的那样div“包含”图像：

div contains image

但是，如果您使浏览器窗口变小，则会达到一个不足以容纳图像的点：图像的一部分将不可见，浏览器需要添加滚动条。到现在为止还挺好。但是，div大小仍然基于视口宽度，因此图像超出了div：

div narrower than image

相反，我希望div总是“围绕”图像，如果包含盒子不能变得更窄则变得更宽。有趣的是，这正是Quirks模式中发生的事情，这里由IE8呈现：

quirks mode

如何通过添加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>

Answer 1

试试这个：

<强> 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/

Answer 2

我会去div { display: table-cell; }

编辑：我认为这不能用给定的标记来完成。您可以使用div { display: table; width: 100%; }来结束，但它不喜欢有保证金。如果你使用两个块元素，那么你可以将{ display: table; width: 100%; }放在外部元素和{ display: table-cell; }以及内部元素上的边距，填充和背景上。

Answer 3

使用 display：inline-block 它也可以。

如何根据内容增加一个盒子的大小？

3 个答案:

修改