CSS grid 是一个很好的选择,并在支持的情况下运作良好。
grid
如果需要关注浏览器支持,您也可以使用 flexbox 它有更好的支持。无论哪个,您都需要供应商前缀。
flexbox
代码笔示例: https://codepen.io/anon/pen/GeQREE
CSS更改非常简单。父/包装元素需要以下内容:
display: flex; flex-wrap: wrap;
对孩子们来说最简单的改变就是宽度。就像是:
width: 31%; margin: 1%;
(总宽度为33%或3)
希望这可以帮助!
你可以用新的方式轻松实现这一目标 css网格 特征。浏览器支持相当不错。您可能需要添加供应商前缀以获得最大的浏览器支持。
基本上,你需要一个父div来保存/包装它的孩子(对于你的情况,这将是灰色框)。
假设这是HTML:
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
和使这个3(列)x2(行)网格的CSS将是:
.parent { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); grid-gap: 15px; } .child { background: #f7f7f7; padding: 15px; }
一行中的所有列都具有相同的高度并且等于最高的列。这是一个工作 codepen 链接以查看它的实际效果。