0

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

我的问题是：如何使用水平滚动条显示水平放置的内联列 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;

}

谢谢，
迈克尔

4

2 回答 2

2

我们试图阻止浏览器完成它的正常工作：以适合当前窗口大小的方式布局内容。内容是块还是内联都没有关系，浏览器仍然会尝试将其放入窗口中。

你可以给你的容器一个固定的宽度，以确保所有列都有足够的空间：

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

}

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

示例页面

示例页面截图 http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

于 2009-08-14T17:38:17.503 回答
0

我认为混乱是正确的，只是可能overflow-x: scroll;相反

于 2009-08-14T16:32:50.630 回答