parent div有text-align：left;

Question

<div>元素包含text-align:left; width:500px;，其中包含<div>个子<div>个width:20px;个元素float:left。

我的问题是，如果不使用{{1}}我们如何将所有元素从左侧并排放置？

---

截图：

Answer 1

我猜我display: inline-block会让你非常接近你想要的东西。它将为内容生成一个块框（允许您指定块级属性，例如width），然后它将以内联方式流动。

Answer 2

您可以使用CSS3列模块column-count属性。出于兼容性原因，您还需要包含-moz和-webkit版本：

#container {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

不幸的是，此属性并非在所有版本的IE上都可用，因此您需要一个Javascript替代方案。

一个好的方法是用Modernizr检查column-count支持，然后创建两个额外的容器元素，每个容器元素的宽度为父级的三分之一，然后使用Javascript我们可以观察扩展和拉为了保持均匀的尺寸，必须有其他两个元素。