如何根据附加图像实现此目的?
正如你所看到的,我有相同的宽度块向左浮动,但我希望中间行与左右行相比有一点偏移量。
是否可以使用普通的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;
}
答案 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;
}