懒人必备！“CSS 样式集合”让你轻松实现图片瀑布流布局

2024-01-11 05:04:10

CSS 瀑布流布局：打造迷人视觉体验

探索图片瀑布流的艺术

图片瀑布流是一种流行的布局技术，可为您的图像画廊增添优雅和动态感。它以错落有致的方式排列图像，以最大程度地利用可用空间，从而形成一种令人惊叹的视觉效果。在本指南中，我们将逐步介绍使用 CSS 实现图片瀑布流布局的两种方法。

方法 1：利用 margin-right

最简单的方法是利用 margin-right 属性。它为每个图像元素添加一个向右的 margin，从而形成自然排列。

HTML 代码：

<div class="瀑布流">
  <img src="image1.jpg" alt="图片 1">
  <img src="image2.jpg" alt="图片 2">
  <img src="image3.jpg" alt="图片 3">
  <img src="image4.jpg" alt="图片 4">
</div>

CSS 代码：

.瀑布流 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.瀑布流 img {
  margin-right: 10px;
}

方法 2：掌握 Flexbox

Flexbox 提供了更强大的控制，允许您设置图像的宽度和响应式排列。

HTML 代码：

<div class="瀑布流">
  <img src="image1.jpg" alt="图片 1">
  <img src="image2.jpg" alt="图片 2">
  <img src="image3.jpg" alt="图片 3">
  <img src="image4.jpg" alt="图片 4">
</div>

CSS 代码：

.瀑布流 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.瀑布流 img {
  width: 25%;
  margin-right: 10px;
}