Question

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

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

enter image description here

但仍然是这样的： enter image description here

我知道用“div”和“float：left”这样做更“容易”，但我与列表有关。

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

Answer 1

使用flexbox。你没有必要使用清单？除非这是家庭作业，否则他会让你做一些不是最佳实践的事情

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我相信您可以通过使用CSS网格https://learncssgrid.com/以更简单，更具面向未来的方式实现这一点。通常不建议使用基于浮点数的布局，类似于基于表格的布局。

如果基于float设置，我会创建一个左列div，中间列div和右列div所有float：left。然后我将两个图像放在左边，高中间放置，最后两个放在右列div中。

用html / css填充图像拼接空间

2 个答案: