CSS SNIPPET

  返回

3列布局  页面布局beginner

使用display: inline-block水平对齐条目创建3列布局。

HTML
<div class="tiles">
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
</div>
CSS
.tiles {
  width: 900px;
  font-size: 0;
}

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

.tile h2 {
  font-size: 20px;
}
效果演示
placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

代码说明
  • 使用 display: inline-block 创建平铺布局,不使用 float, flexgrid
  • .tiles 是容器元素,.tile 是需要内联显示的条目。
  • 使用 width: calc((900px / 3)) 将容器宽度均分为3列。
  • .tiles 设置font-size: 0; 以避免产生空白。
  • h2设置font-size: 20px 显示文本。
浏览器支持

100.0%