通过水平滚动水平通过

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.

干杯！