Question

我正在使用内联块元素而不是浮点数来生成响应式框格。当元素是内联的时，包装宽度可以正常工作。当它们转换为垂直时，包装器的宽度会扩展到其容器的宽度，而不是折叠到子宽度。这有什么希望吗？

以下是代码：

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/

Answer 2

由于包装元素具有display：inline-block，它将展开以填充可用空间。同样，为包装器设置已知宽度或最大宽度，它将使用所有可用空间。解决此问题的最佳方法是使用媒体查询在包装器元素上设置宽度

内联块父级不会折叠到子宽度

2 个答案: