我将其添加到 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%;
}
最佳答案
请像这样使用砖石布局。
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>
关于HTML Masonry 图像布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35059176/