我如何按照它们在图像中的方式定位div元素

Question

就像让我的div元素以这种方式定位enter image description here

Answer 1

使用flexbox模仿砌体布局。

HTML

<div id="container">
     <img src="blah1.jpg" alt>
     <img src="blah2.jpg" alt>
     <img src="blah3.jpg" alt>
     <img src="blah4.jpg" alt>
</div>

CSS

div#container {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  max-height: 600px;
  width: 500px;
}

div#container img {
  width: 50%;
}