HTML Divs，Columns，Horizo​​ntal Scroll Bar

Question

我正在尝试在彼此相邻的列中显示几个数据块。我已将容器设置为内联显示，如果列相对较薄，则效果很好。一旦列超过水平屏幕长度，其他列将附加到底部。

我的问题是：如何使用水平滚动条显示水平放置的内联列div？

注意：我实际上想要滚动条;我希望元素并排。

<div class="container">
    <div class="child" id="1">Stuff</div>
    <div class="child" id="2">Stuff</div>
</div>

---------

.child {
   /*float:left;
   margin-right:5em;*/
   display:inline;
}
.container {
   display:inline;
   overflow: scroll-x;
   white-space: nowrap;

}

谢谢，
迈克尔

Answer 1

我们试图阻止浏览器执行正常的工作：以适合当前窗口大小的方式布局内容。如果这些东西是块或内联的，那么浏览器仍然会尝试将它放在窗口内。

您可以为容器指定固定宽度，以确保所有列都有足够的空间：

.child {
   margin-right:50px;
   float:left;
   width: 100px;
   border: 1px black solid;

}

.container {
   width: 1520px;
   overflow: scroll-x;
   border: 1px red solid;
}

example page

screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

Answer 2

我认为混乱是正确的，它可能只是overflow-x: scroll;而不是