3列平铺布局

使用 display: inline-block 水平对齐项目，创建一个3列平铺布局。

• 使用 display: inline-block 创建平铺布局，而不使用 float、flex 或 grid。
• 使用 width 结合 calc 将容器的宽度均匀分成3列。
• 为 .tiles 设置 font-size 为 0，以避免空白间隙，并为 <h2> 元素设置 font-size 为 20px 以显示文本。

[!IMPORTANT]

如果使用相对单位（例如 em），使用 font-size: 0 来消除块之间的空白可能会导致副作用。

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}