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具有正确的高度，但其宽度是浏览器窗口的宽度 - 而不是1320px。这很糟糕，因为这意味着页面上我希望宽度为100％的其他元素的大小不正确，我无法在content - div上使用边距或填充。

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

Answer 1

也为内容div使用内联块。

display：block元素默认自动获得100％的宽度。所以正文有100％的宽度（视口大小，即浏览器窗口大小）反过来，它的儿童内容也有100％的宽度。

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

1 个答案: