css 瀑布流

/* 瀑布流布局的 CSS 示例代码 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  column-count: 3; /* 设置列数 */
  column-gap: 16px; /* 设置列间距 */
  width: 80%;
  margin: 0 auto;
}

.item {
  background: #f4f4f4;
  padding: 20px;
  margin-bottom: 16px;
  break-inside: avoid; /* 防止项目被拆分到不同的列中 */
  border: 1px solid #ddd;
}

/* 响应式设计，根据屏幕宽度调整列数 */
@media (max-width: 768px) {
  .container {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .container {
    column-count: 1;
  }
}

解释说明

1. 容器设置 (container):

   • column-count: 3;：定义了容器内有三列。
   • column-gap: 16px;：设置了每列之间的间距为16px。
   • width: 80%; 和 margin: 0 auto;：使容器居中显示，并且宽度为页面的80%。

2. 项目设置 (item):

   • break-inside: avoid;：确保每个项目不会被拆分到不同的列中，保持项目的完整性。
   • margin-bottom: 16px;：在每个项目下方添加一些间距，以避免它们紧挨在一起。
   • padding: 20px; 和 border: 1px solid #ddd;：为项目添加内边距和边框，使其看起来更美观。

3. 响应式设计:

   • 使用媒体查询 (@media) 根据屏幕宽度调整列数。当屏幕宽度小于等于768px时，列数变为2；当屏幕宽度小于等于480px时，列数变为1。

通过这些CSS规则，可以实现一个简单的瀑布流布局，适用于展示图片、文章摘要等内容。