创建响应式平铺布局

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") subgraph Lab Skills css/selectors -.-> lab-35248{{"`创建响应式平铺布局`"}} css/fonts -.-> lab-35248{{"`创建响应式平铺布局`"}} css/margin_and_padding -.-> lab-35248{{"`创建响应式平铺布局`"}} css/width_and_height -.-> lab-35248{{"`创建响应式平铺布局`"}} css/display_property -.-> lab-35248{{"`创建响应式平铺布局`"}} end

三栏布局

虚拟机中已经提供了 index.htmlstyle.css

要创建三栏布局,请使用 display: inline-block,而不是 floatflexgrid。结合使用 widthcalc 将容器的宽度均匀地分成三列。为避免出现空白,将 .tilesfont-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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程