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进行设置。最后，在float: left中使用.item非常重要，否则它们不会水平包裹。

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

如果这是您尝试实现的目标，请查看at this fiddle。

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

干杯！

水平滚动通过div

1 个答案: