带有 html/css 的图像马赛克填充空间答案

【问题标题】：Image mosaic with html/css fill the space带有 html/css 的图像马赛克填充空间
【发布时间】：2018-05-31 18:10:22
【问题描述】：

我正在尝试制作一个“图像马赛克”，主要由相同大小的图像组成，其中一些是双倍高度。

它们都应该像这样整齐地对齐：

enter image description here

但还是这样： enter image description here

我知道用 div 和“float:left”做这件事更“容易”，但我必须用列表。

有人让我知道我该如何解决这个问题？！

【问题讨论】：

请添加相关代码以更好地帮助您。如何创建最小、完整和可验证的示例：stackoverflow.com/help/mcve
你和list有什么关系？你不能把它们包装在 div 中吗？一个例子在这里真的很有帮助。

标签： html css web frontend

【解决方案1】：

使用弹性框。您不必使用列表吗？除非这是家庭作业，否则他会让你做一些不是最佳做法的事情

.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>

【讨论】：

【解决方案2】：

我相信您将能够通过使用 CSS 网格https://learncssgrid.com/ 以更简单、更面向未来的方式实现这一点，通常不鼓励基于浮动的布局，类似于基于表格的布局。

如果您设置为基于浮点数，我将创建一个左列 div、中间列 div 和右列 div 全部为 float:left。然后我会把两张图片放在左边，高放在中间，最后两张放在右边的div中。

【讨论】：