我怎麼能他們是圖像

Question

喜歡讓我的div元素定位在這樣enter image description here

Answer 1

使用Flexbox的模仿磚石佈局的方式定位div元素。

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%; 
}