我需要这样的 masonry 网格:
是否可以只使用 flexbox 来实现?还是有其他办法? 不想使用 Masonry 库或其他库或框架。
最佳答案
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4 ">
</div>
<div style="clear:both;"></div>
</div>
</div>
</section>
</body>
</html>
关于css - 使用 flexbox 的 Masonry 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41026871/