固定宽度，高度灵活的CSS网格

Question

NOTE This is similar to this post , however there is a strict no-javascript requirement and the answer should be responsive (ie there is not a fixed number of columns).

I would like to style several fixed width, variable height boxes using no javascript such that they form a kind of fluid grid. This jsfiddle yields the picture below. This is essentially just the following css:

div {
  float: left;
  margin: 1em;
  border: 1px solid #999;
  width: 150px;
}

I'd like for the only vertical empty space to be the margins. In terms of the screenshot above, I'd like for the tops of 5 and 6 to move upwards to 1em from the bottom of 1 and 2 , respectively.

Answer 1

使用纯CSS是不可能的，因为您必须知道div的当前位置，因此，如果您真的想这样做，则必须使用css的“ margin-top”属性或使用jQuery之类的方法重新定位<div>这些jqueryhouse.com/jquery-grid-plugins