通過水平滾動水平通過

Question

我想讓水平很多文本與div對齊，因此您可以水平滾動它們。沒有真正經歷過，我想不出什麼我做錯了..

這裏是我的CSS：

#content { 
    font-size: 18px; 
    text-align: justify; 
    display: inline-block; 
    vertical-align: middle; 
    overflow-x: auto; 
    height: 70%; 
    margin-top: 15%; 
    margin-bottom: 15%; 
} 

.item { 
    width: 50%; 
    max-height: 70%; 
    margin-bottom: 30px; 
    margin-top: 100px; 
    margin-left: 25%; 
    margin-right: 25%; 
    overflow: scroll; 

} 

謝謝！

Answer 1

我假設你想將多個.item s放入#content中，然後它們應該水平包裝。那是對的嗎？

然後，您需要在您的#content上有一個固定寬度的包裝（這將成爲您的'滾動窗口'）。 #content本身需要更寬，以便您可以在包裝需要屬性overflow-x:scroll時滾動它。由於您不知道#content應該有多寬（除非您知道.item div的數量），所以我建議使用Javascript進行設置。最後，您的.item中有float: left，否則它們不會水平換行。

另外，你可以讓JS設置你的#content的身高給heighest .item如果你不想這是相同的所有.item秒。

看一看at this fiddle如果這是你試圖實現的。

（可選）您可以使用css3列。但是你不會使用它，因爲你不會有任何支持IE9及以下版本。 See here how this works.

乾杯！