三栏布局

简介

在本实验中，我们将学习如何使用 display: inline-block 创建一个三栏布局。你将使用 width 和 calc 将容器均匀地分成三列，并设置 font-size 以避免出现空白。在本实验结束时，你将更好地理解如何在不使用 float、flex 或 grid 的情况下创建一个简洁且响应式的平铺布局。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 96%。获得了学习者 100% 的好评率。

虚拟机中已经提供了 index.html 和 style.css。

要创建三栏布局，请使用 display: inline-block，而不是 float、flex 或 grid。结合使用 width 和 calc 将容器的宽度均匀地分成三列。为避免出现空白，将 .tiles 的 font-size 设置为 0，并将 <h2> 元素的 font-size 设置为 20px 以显示文本。请注意，如果使用相对单位（例如 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;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了三栏布局实验。你可以在 LabEx 中练习更多实验来提升你的技能。

创建响应式平铺布局

简介

三栏布局

总结