0

我目前正在尝试创建一个基于列的、可滚动的水平布局。在玩弄了float: leftand之后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）

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

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

4

1 回答 1

1

对内容 div 也使用 inline-block。

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

于 2013-10-20T09:34:51.380 回答