Html 在div中水平滚动

我试图使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;

}

---

谢谢

我假设您要将多个

项

放入

#内容

，然后它们应该水平包装。对吗

然后，您需要在

#内容上有一个固定宽度的包装器（这将是您的“滚动窗口”）。
#content
本身需要更宽，以便您可以滚动它，而包装器需要属性
overflow-x:scroll
。因为你不知道你的
#内容
应该有多宽（除非你知道
.item
div的数量），我建议用Javascript设置它。最后，在
.item
中使用
float:left
是很重要的，否则它们不会水平缠绕

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

看看这是否是你想要达到的目标

也可以选择使用css3列。但是，您还不会使用它，因为您将不支持IE9及以下版本

干杯
 请在JSFIDLE上做一个演示。