您现在的位置是：网站首页> 编程资料编程资料

css实现瀑布流空白处背景粉色背景块css3 column实现卡片瀑布流布局的示例代码用CSS3实现瀑布流布局的示例代码CSS3实现瀑布流布局与无限加载图片相册的实例代码CSS3使用多列制作瀑布流基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享css和js实现瀑布流效果示例详解纯css实现瀑布流（multi-column多列及flex布局）

2023-10-28 172人已围观

简介 css实现瀑布流空白处背景粉色背景块，需要的朋友可以参考一下

css实现粉色背景块，效果如下：

css：

复制代码

代码如下:

.listbox {
position: relative;
width: 1000px;
margin: 20px auto;
overflow: hidden;
}
.listbox ul {
float: left;
width: 240px;
margin-right: 10px;
background: #ffebf9; /*粉色背景（也可使用能重复的背景图片）*/
padding-bottom: 9000px; /*列之间的差距，建议设大一些*/
margin-bottom: -9010px; /*公式：padding-bottom + 块与块的间距 */
}
.listbox li {
background: #fff; /*覆盖ul粉色背景*/
padding-bottom: 10px; /*块与块的间距*/
}
.listbox li .img {
width: 238px;
padding: 15px 0px;
text-align: center;
background: #fff;
border: 1px solid #F5EDE3;
}

html：

复制代码

代码如下: