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

时间：2011-09-09 22:35:32

标签： html css quirks-mode

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

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

3 个答案:

答案 0 :(得分：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/

答案 1 :(得分：0)

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

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

答案 2 :(得分：-1)

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

相关问题
最新问题