html - 内联 block 父级不会折叠到子级宽度

Question

我使用行内 block 元素而不是 float 元素来获得响应式方框网格。当元素是内联时，包装宽度可以正常工作。当它们变为垂直时，包装器的宽度会扩展到其容器的宽度，而不是折叠到子宽度。这有希望吗？

代码如下:

HTML:
<div class="container">
  <div class="wrapper">
    <div class="item item1">
        <img src="http://www.noupe.com/wp-content/uploads/trans/wp-content/uploads/2010/07/th_IMG_1826s.jpg" />
    </div>
    <div class="item item2">
        <h2>Text Div</h2>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
        </ul>
    </div>
</div>

CSS:
img {
    width: 325px;
    height: auto;
}

div.container {
    display:block;
    width: 100%;
    max-width: 1000px;
}

div.wrapper {
    display: inline-block;
    background: #544;
    text-align: center;
    padding: 15px;
}

div.item {
    display:inline-block;
    width: 325px;
}

如果我删除 img div，包装器将完美运行。我觉得我错过了一些非常明显的东西。

编辑:忘记了 jsfiddle:http://jsfiddle.net/U3hus/13/

Answer 1

这是因为容器是固定宽度而包装器没有指定宽度。你应该为包装器指定一个宽度来解决这个问题。

.container {
    width: 1000px;
}

.wrapper {
    display: inline-block;
    background: #544;
    text-align: center;
    padding: 15px;
    width: 100%;
}

粗略示例:http://jsfiddle.net/U3hus/13/