html - 如何在固定宽度的 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 -> 最大宽度为 290 像素，高度为 100 像素（所以应该有一个水平滚动条）

• 不想用float

标签： htmlcssimage

Answer 1

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

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

.attachment {
  display: inline-block;
}

CodePen 示例