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