Как разместить изображения бок о бок в пределах фиксированной ширины 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

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

Answer 2

К сожалению, не увидев ответа, я разобрался после 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>

Это сработало для меня

Answer 3

Добавьте это в свой CSS:

.attachment {
  display: inline-block;
}

Например: https://codepen.io/fraggley/pen/eYpabjd