WordPress文章插入瀑布流样式

分开格式如下：

要实现图片的HTML瀑布流布局，可以使用CSS3的column属性或者使用JavaScript库如Masonry。以下是使用CSS3的方法实现的简单例子：

HTML:

<div class="waterfall">
    <div class="waterfall-item">
        <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="waterfall-item">
        <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 更多图片 -->
</div>

CSS:

.waterfall {
    column-count: 4;
    column-gap: 1em;
}

.waterfall-item {
    break-inside: avoid;
    margin-bottom: 1em;
}

.waterfall-item img {
    width: 100%;
    height: auto;
    display: block;
}

这段代码会创建一个瀑布流布局，.waterfall是包含图片的容器，.waterfall-item是每个图片的容器。CSS中column-count定义了瀑布流的列数，column-gap定义了列之间的间隔。break-inside: avoid;确保每个图片项在断行处不会被分开。

请注意，CSS方法有兼容性限制，不是所有旧版浏览器都支持多列布局。如果需要更广泛的浏览器支持，可能需要使用JavaScript库。

嵌入格式如下：

<div id="image_container" style="column-count: 2; column-gap: 1em;">

    <div style="break-inside: avoid; margin-bottom: 1em;">
        <img style="width: 100%; height: auto; display: block;" src="图片地址1.jpg" />
    </div>
    <div style="break-inside: avoid; margin-bottom: 1em;">
        <img style="width: 100%; height: auto; display: block;" src="图片地址2.jpg" />
    </div>

</div>