HTML Masonry 图像布局

Question

我将其添加到 wordpress 主题中，但新图像是垂直发布的而不是水平发布的。我希望新图像显示在绿线上，而不是图像上的红线上:IMAGE .任何帮助都会很棒。

HTML:

<section>
<img src="https://unsplash.it/700/345?image=564" />
<img src="https://unsplash.it/700/550?image=587" />
<img src="https://unsplash.it/700/450?image=589" />
<img src="https://unsplash.it/700/500?image=421" />
<img src="https://unsplash.it/700/300?image=455" />
<img src="https://unsplash.it/700/150?image=406" />
<img src="https://unsplash.it/700?image=594" />
<img src="https://unsplash.it/700/450?image=417" />
<img src="https://unsplash.it/700/400?image=410" />
<img src="https://unsplash.it/700/550?image=582" />
<img src="https://unsplash.it/700/175?image=591" />
<img src="https://unsplash.it/700/345?image=421" />
<img src="https://unsplash.it/700/567?image=572" />
<img src="https://unsplash.it/700/978?image=401" />
<img src="https://unsplash.it/700/654?image=388" />
<img src="https://unsplash.it/700/500?image=423" />
</section>

CSS

section {
     column-width: 300px;
     column-gap: 5px;
     padding: 5px;
}

section img {
     width: 100%; 
}

Answer 1

请像这样使用砖石布局。

 article {
      -moz-column-width: 13em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
}

section {
     width: 100%; 
     display: inline-block;
}

<article>
<section>
<img src="https://unsplash.it/700/345?image=564" />
</section>
<section>
<img src="https://unsplash.it/700/550?image=587" />
</section>
<section>
<img src="https://unsplash.it/700/450?image=589" />
</section>
<section>
<img src="https://unsplash.it/700/500?image=421" />
</section>
<section>
<img src="https://unsplash.it/700/300?image=455" />
</section>
<section>
<img src="https://unsplash.it/700/150?image=406" />
</section>
<section>
<img src="https://unsplash.it/700?image=594" />
</section>
<section>
<img src="https://unsplash.it/700/450?image=417" />
</section>
<section>
<img src="https://unsplash.it/700/400?image=410" />
</section>
<section>
<img src="https://unsplash.it/700/550?image=582" />
</section>
<section>
<img src="https://unsplash.it/700/175?image=591" />
</section>
<section>
<img src="https://unsplash.it/700/345?image=421" />
</section>
<section>
<img src="https://unsplash.it/700/567?image=572" />
</section>
<section>
<img src="https://unsplash.it/700/978?image=401" />
</section>
<section>
<img src="https://unsplash.it/700/654?image=388" />
</section>
<section>
<img src="https://unsplash.it/700/500?image=423" />
</section>
</article>