如何在固定宽度的 div 中并排放置图像

Question

<div id="attachments">
<div class="attachment">
<img class="item" src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com" alt="">
</div>
<div class="attachment">
<img class="item" src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com" alt="">
</div>
<div class="attachment">
<img class="item" src="https://via.placeholder.com/150/FFFF00/000000?Text=WebsiteBuilders.com" alt="">
</div>
<div class="attachment">
<img class="item" src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" alt="">
</div>
<div class="attachment">
<img class="item" src="https://via.placeholder.com/150/008000/FFFFFF/?text=Green.com" alt="">
</div>
</div>

想要将这些图像并排放置。这里： 1. #attachments ->最大宽度 290px 和高度 100px(所以应该有一个水平滚动条(

• 不想使用float

Answer 1

将 display： flex 添加到 #attachments 和 display： inline-block 添加到 .attachment。您还需要 overflow-x：滚动水平滚动条。

#attachments {
display: flex;
max-width: 290px;
height: 200px;
overflow-x: scroll;
}
.attachment {
display: inline-block;
}

代码笔示例

Answer 2

将其添加到您的 CSS 中：

.attachment {
display: inline-block;
}

例如：https://codepen.io/fraggley/pen/eYpabjd

Answer 3

不幸的是，在看到答案之前，我在尝试 2 小时后想通了。 后来我稍微改变了标记并做了：

#attachments {
	 height: 100px;
	 width: 300px !important;
	 display: flex;
	 position: absolute;
	 bottom: 60px;
	 background: rgba(153, 153, 153, 0.2);
	 overflow-x: auto;
	 overflow-y: hidden;
}
#attachments .attachment {
	 height: 100%;
	 margin-right: 5px;
	 position: relative;
}
#attachments .attachment .cancel-icon {
	 position: absolute;
	 right: 0;
	 color: #6c757d;
	 border-bottom-left-radius: 50%;
	 border-top-left-radius: 50%;
	 padding: 0;
	 margin: 0;
	 background: rgba(0, 0, 0, .2);
}
#attachments .attachment .cancel-icon:hover {
	 color: red;
	 cursor: pointer;
}
#attachments .attachment .item {
	 height: 100%;
}

<div id="attachments">
<div class="attachment">
<i class="material-icons cancel-icon">cancel</i>
<img class="item" src="https://via.placeholder.com/1920x1080/0000FF/808080?Text=Digital.com" alt="">
</div>
<div class="attachment">
<i class="material-icons cancel-icon">cancel</i>
<img class="item" src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com" alt="">
</div>
<div class="attachment">
<i class="material-icons cancel-icon">cancel</i>
<img class="item" src="https://via.placeholder.com/150/FFFF00/000000?Text=WebsiteBuilders.com" alt="">
</div>
<div class="attachment">
<i class="material-icons cancel-icon">cancel</i>
<img class="item" src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" alt="">
</div>
<div class="attachment">
<i class="material-icons cancel-icon">cancel</i>
<img class="item" src="https://via.placeholder.com/150/008000/FFFFFF/?text=Green.com" alt="">
</div>
</div>

这对我有用