固定宽度,柔性高度的css网格

时间:2015-06-30 17:31:36

标签: html css css-float

注意这类似于this post,但是有严格的无javascript要求,答案应该是响应式的(即没有固定数量的列)。

我想设置几个固定宽度,可变高度的盒子,不使用javascript,这样它们就形成了一种流体网格。这个jsfiddle得出如下图。这基本上只是以下css:

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

boxes

我希望唯一的垂直空白区域是边距。就上面的屏幕截图而言,我希望56的顶部分别从12的底部向上移动到1em

1 个答案:

答案 0 :(得分:-3)

it's not possible by using pure CSS because any how you have to know the current position of div so if you really wanna do this then you have to re position the <div> either using " margin-top " property of css or using jQuery like these jqueryhouse.com/jquery-grid-plugins