html - 在 div 中水平滚动

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 放入 #content 中，然后它们应该水平换行。对吗？

然后您需要在具有固定宽度的 #content 上进行包装(这将成为您的“滚动窗口”)。 #content 本身需要更宽，以便您可以滚动它，而包装器需要属性 overflow-x:scroll。因为您不知道您的#content 应该有多宽(除非您知道.item div 的数量)我建议使用Javascript 设置它。最后，在您的 .item 中添加 float: left 很重要，否则它们不会水平换行。

此外，如果您不希望所有 .item 都相同，您可以让 JS 将 #content 的高度设置为最高的 .item s.

看看at this fiddle如果这是你想要达到的目标。

您可以选择使用 css3 列。但是您还不会使用它，因为您不会对 IE9 及以下版本提供任何支持。 See here how this works.

干杯!