css瀑布流

比如我们有一个类似这样的HTML结构:

<div class="masonry"> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content"> </div> </div> <!-- more items --> </div>

其中div.masonry是瀑布流的容器，其里面放置了n个列表div.item。为了节约篇幅，上面代码仅列了两个。结构有了，现在来看CSS。在.masonry中设置column-count和column-gap，前者用来设置列数，后者设置列间距：著作权归作者所有。

.masonry { column-count: 5; column-gap: 0; }

.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }

 

flex&&grid

原文: https://www.w3cplus.com/css/pure-css-create-masonry-layout.html © w3cplus.com

转载于:https://my.oschina.net/chaseCl/blog/3023022