[分享]css双列瀑布流布局

CSS双列瀑布流布局是一种流行的网页设计布局方式，可实现页面的美观性和排版的合理性。下面将介绍如何使用CSS代码实现该布局。/ HTML结构 / / 左侧子元素 / / 右侧子元素 / / 左...

CSS双列瀑布流布局是一种流行的网页设计布局方式，可实现页面的美观性和排版的合理性。下面将介绍如何使用CSS代码实现该布局。

/* HTML结构 */ 
<div class="waterfalls"> 
   <div class="item"></div>  /* 左侧子元素 */
   <div class="item"></div>  /* 右侧子元素 */
   <div class="item"></div>  /* 左侧子元素 */
   <div class="item"></div>  /* 右侧子元素 */
   ……
</div>

/* CSS样式 */ 
.watefalls { 
   column-count:2;  /* 单位为列数，这里设置two-column */
   column-gap:5px;  /* 设置列与列之间的间距 */
} 
.item { 
   display:inline-block;  /* 设置子元素以行内块元素排列 */
   margin-bottom:20px;  /* 设置每个子元素之间的垂直间距 */
   padding:15px;  /* 设置子元素的内边距 */ 
   background:#fff;  /* 设置子元素的背景颜色 */
}

以上代码设置了一个父容器“waterfalls”，内含多个子元素“item”。使用CSS的column-count属性实现了双列布局，同时使用column-gap属性控制每列间距。每个子元素使用display:inline-block属性排列，可显示为均匀的网格瀑布流布局。

此外，为使布局更加美观，可以对子元素设置一些限制。例如：基本统一的宽度、高度以及内边距的收放等限制，可实现整洁有序的效果。同时，我们也可以通过CSS3的其他新特性，比如box-shadow、nth-child、transition等属性，来实现更为丰富多彩的效果。