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;代替