纯CSS无hacks的跨游览器自适应高度多列布局 推荐

以下是详细的“纯CSS无hacks的跨游览器自适应高度多列布局”的攻略：

概览

在前端开发中，我们常常需要实现类似Pinterest等网站的多列布局，这时候自适应高度就显得尤为重要。

本篇攻略将介绍如何通过纯CSS代码实现无hack、跨游览器的自适应高度多列布局。

原理

使用CSS3中的Flexible Box模型来实现布局。

具体来说，我们将父容器（container）设为flex布局，子容器（items）设为如下样式：

display: flex;           // 使用flex布局
flex-flow: row wrap;     // 按行排列，换行
align-content: flex-start;     // 在垂直方向上从起始位置开始布局

这样子容器将会自适应高度，并按整行排列，能够适应不同宽度下的显示需求。

代码实现

HTML结构

我们假设需要展示一个类似网站的图片列表，有多张图片并列在一起。HTML结构如下：

<div class="container">
  <div class="item"><img src="xxx"></div>
  <div class="item"><img src="xxx"></div>
  <div class="item"><img src="xxx"></div>
  <div class="item"><img src="xxx"></div>
  <!-- ... -->
</div>

样式实现

我们使用如下的样式来实现多列布局：

.container {
  display: flex;           // 使用flex布局
  flex-flow: row wrap;     // 按行排列，换行
  align-content: flex-start;     // 在垂直方向上从起始位置开始布局
}

.item {
  width: 25%;              // 每列宽度为25%
  margin: 0;               // 设置间距为0
  padding: 0;              // 设置内边距为0
  box-sizing: border-box;  // 盒子模型为border-box
}

这样我们就完成了多列布局的实现。其中，每列的宽度可以根据需求自行调整，只需保证总和为100%即可。

示例

以下是一个针对图片列表的样例实现。其中，图片的高度被随机生成，但布局自适应调整。

<div class="container">
  <div class="item"><img src="https://picsum.photos/id/237/200/300"></div>
  <div class="item"><img src="https://picsum.photos/id/238/200/400"></div>
  <div class="item"><img src="https://picsum.photos/id/239/200/250"></div>
  <div class="item"><img src="https://picsum.photos/id/240/200/350"></div>
  <div class="item"><img src="https://picsum.photos/id/241/200/450"></div>
  <!-- ... -->
</div>

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 25%;
}

.item img {
  width: 100%;
  display: block;
}

总结

以上就是“纯CSS无hacks的跨游览器自适应高度多列布局”的完整攻略。我们通过使用CSS3的Flexible Box模型来实现布局，能够做到自适应高度、跨游览器支持，并且无需使用hack。