如何实现TinyMCE中从MySQL导入的图片两两横向并排？

嘿，我看了你的代码，发现几个导致inline-block没生效的小问题，咱们一步步来修复：

问题根源 #

1. 你把display: inline-block;直接写在<img>标签里，没放在style属性中，这种写法是无效的
2. 循环里每个图片容器都用了id='img_div'，HTML规范里id是唯一标识，不能重复使用，得换成class
3. 外层的<div>默认是块级元素，会独占一行，所以就算图片设了行内块也无法横向排列

修改后的完整代码 #

PHP部分（修正标签写法和重复id问题）

$result = mysqli_query($db, "SELECT * FROM images WHERE file_nr = '$id'"); ?>
<?php while ($row = mysqli_fetch_array($result)) { 
    echo "<div class='img-container'>"; 
    echo "<img style='width: 300px; height: 300px;' src='../../cases_1/overdue/images/" . $row['image'] . "' >"; 
    echo "<p>" . $row['image_text'] . "</p>"; 
    echo "</div>"; 
} ?>

CSS部分（实现两两并排布局）

把这段CSS加到你的页面<style>标签里或者外部样式文件中：

.img-container {
    display: inline-block;
    width: 300px; /* 和图片宽度保持一致，防止排版错乱 */
    margin: 0 10px 20px 0; /* 可选：加些间距让布局更舒服 */
    vertical-align: top; /* 顶部对齐，避免文字长度不同导致容器错位 */
}

/* 实现每两个图片换一行的效果 */
.img-container:nth-child(2n+1) {
    clear: left;
}

说明一下为什么这样改 #

• 用class='img-container'替代重复的id，既符合HTML规范，也方便统一控制所有图片容器的样式
• 把图片的样式正确放到style属性里（更推荐写在CSS中，方便后续批量调整）
• 给容器设置display: inline-block，让它们具备横向排列的能力
• :nth-child(2n+1)选择器会选中第1、3、5...个容器，强制清除左侧浮动，这样每两个图片就会自动换行
• vertical-align: top能确保所有容器顶部对齐，不会因为某张图片的说明文字太长导致整体布局歪掉

如果是要在TinyMCE编辑器里显示这个效果，记得把这段CSS也配置到TinyMCE的内容样式里，这样编辑的时候就能看到正确的排版啦。

内容的提问来源于stack exchange，提问作者Trevor Ackermann