*,body { padding:0; margin:0; } .container { width:100%; position:relative; } .title { margin:3em auto; text-align:center; } .waterfall-content { position:relative; overflow:hidden; } .waterfall-item { float:left; position:relative; width:23%; margin-right:2.666666666%; overflow:hidden; border:1px solid #ccc; border-radius:4px; padding:1em; margin-bottom:1em; } .waterfall-item:nth-child(3n) { margin-right:0; } .waterfall-item>img { width:100%; max-width:100%; } .get-more-line { position:relative; text-align:center; } .get-more-line a { padding:10px; width:49%; background-color:#f7f7f7; display:inline-block; font-size:16px; color:#999; text-decoration:none; } .get-more-line:before { width:22%; top:25px; left:0; display:block; position:absolute; height:1px; background-color:#ccc; content:''; } .get-more-line:after { width:22%; top:25px; right:0; display:block; position:absolute; height:1px; background-color:#ccc; content:''; } .disabled { cursor:not-allowed; }
一个 简单 的平铺型瀑布流模拟例子