Изображение мозаики с html / css заполняет пространство

Question

Я пытаюсь создать «мозаику изображений», состоящую в основном из изображений одинакового размера, а некоторые из них имеют двойную высоту.

Все они должны быть аккуратно выровнены следующим образом:

введите описание изображения здесь

Но все равно вот так: введите описание изображения здесь

Я знаю, что "проще" сделать это с помощью divsи "float: left", но я имею отношение к списку.

У кого-то была идея, как я могу это исправить ?!

Answer 1

Я полагаю, что вы сможете реализовать это более простым и более перспективным способом, используя CSS-сетки. https://learncssgrid.com/ Разметки на основе плавающего числа, как правило, не рекомендуется, как и макеты на основе таблицы.

Есливы устанавливаете на основе float, я бы создал div левого столбца, div среднего столбца, и div правого столбца все float: left.Затем я поместил бы два изображения слева, высокий посередине и два последних в правом столбце div.

Answer 2

Используйте flexbox.Вы не должны использовать список?Если это не домашнее задание, в этом случае он заставляет вас делать что-то, что не является лучшей практикой

.mosaic-container {
  display: flex;
  justify-content: space-between;
  width: 330px;
  padding: 10px;
  background-color: blue;
  border: 3px solid black;
}

.left-col, .mid-col, .right-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 100px;
}

.left-col .mosaic-tile:first-of-type, .right-col .mosaic-tile:first-of-type {
  margin-bottom: 10px;
}

.mid-col .mosaic-tile {
  height: 100%;
}

.mosaic-tile {
  width: 100%;
  height: 100px;
  background-color: #fff;
}

<div class="mosaic-container">
  <div class="left-col">
    <div class="mosaic-tile">1.1</div>
    <div class="mosaic-tile">2.1</div>
  </div>
  <div class="mid-col">
    <div class="mosaic-tile">1.2</div>
  </div>
  <div class="right-col">
    <div class="mosaic-tile">1.3</div>
    <div class="mosaic-tile">2.2</div>
  </div>
</div>