浮动div在3行网格中,中间行与顶部偏移

时间:2017-01-29 11:23:12

标签: jquery css jquery-masonry

如何根据附加图像实现此目的?

enter image description here

正如你所看到的,我有相同的宽度块向左浮动,但我希望中间行与左右行相比有一点偏移量。

是否可以使用普通的CSS,也许是flexbox?或者我必须使用像砖石这样的东西吗?

我尝试将上边距应用于中间行的每个块,但这不起作用:

.block {
 background-color:red;
 height:200px;
 width:33.333%;
 border:1px solid black;
 float:left;
 box-sizing: border-box;
}

.block:nth-child(3n+2) {
 margin-top:10px;
 background:blue;
 color:white;
}

https://jsfiddle.net/oaLh13dL/2/

1 个答案:

答案 0 :(得分:1)

您可以使用if __name__ == '__main__':代替花车。

Flexbox
.block_wrap {
  display: flex;
  flex-wrap: wrap;
}
.block {
  background-color: red;
  height: 200px;
  flex: 0 0 calc(33.333% - 20px);
  border: 1px solid black;
  box-sizing: border-box;
  margin: 0 10px;
}
.block:nth-child(3n+2) {
  margin-top: 10px;
  background: blue;
  color: white;
}