用单个 div 标签分隔 img 标签

Question

我有一个大小相等的图像栏，并希望在每组图像之间插入一个分隔符。

出现的问题是，在两个 img 标签之间插入的div(作为分隔符(会导致换行。如果我删除div 标签，所有图像都在一行中正确对齐。

<div class="bar">
<img id="id1"/>
<!-- I cause trouble -->
<div id="d">d</div>
<img id="id2"/>
</div>

具有以下样式：

.bar {
height:42px;
color:white;
overflow:auto;
padding:5px;
width: 200px;
background-color: #0000ff;
display: inline-block;
}
#id1, #id2 {
background-color: #FFFF00;
width: 40px;
height: 40px;
}
#d {
width:40px;
height:40px;
background-color: #ff0000;
}

你可以在小提琴上找到这个例子

感谢您的帮助 乔

Answer 1

感谢您的提示。 我更改了那一行：

.bar {
display: flex;
}

这解决了我的问题。