水平布局：div 忽略子 div 的宽度

Question

我目前正在尝试创建基于列的、可滚动的水平布局。在玩了 float: left 和 position: absolute 之后，发现它们的行为不像我想要的那样，我现在又回到了非常简单的 HTML - 但不幸的是，我的代码仍然没有达到预期的效果。

我目前使用以下 HTML：

<div id="content">
<div style="height: 600px; width: 1320px;">
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 0px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
</div>
</div>

(JSFiddle of it here)

基本上它正在工作，我遇到的问题是content-div 忽略了其子 div 的大小，而 body 标签也没有正确的大小！ content-div 的高度是正确的，但它的宽度是浏览器窗口的宽度——而不是 1320 像素。这很糟糕，因为这意味着页面上我希望宽度为 100% 的其他元素的尺寸不正确，并且我无法在 content-div 上使用边距或填充。

我不太明白这里发生了什么——我不使用任何浮点数或绝对元素，并且有一个明确调整大小的元素。为什么content-div 忽略了这一点？它不应该有必要的大小来容纳它的孩子吗？谢谢！

Answer 1

对内容 div 也使用 inline-block。

默认情况下，display:block 元素自动获得 100% 的宽度。 所以 body 有 100% 的宽度（视口的大小，即浏览器窗口大小） 反过来，它的子内容也有 100% 的宽度。