CSS实现瀑布流空白处背景

2020-01-27 14:18:27

字体：大中小

来源：转载

供稿：网友

CSS实现瀑布流空白处背景，背景颜色自己可定义，在空白处填充布景，可使瀑布流看上去更整齐美观，不至于看上去那么乱，当然这个也和个人喜好有关，有些朋友还是比较喜欢背景是白色的，这样更清新一些，代码分享给大家，有需要的就参考一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>    <title>css实现瀑布流空白处背景</title>    <style>        .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;        }    </style></head><body><div class="listbox">    <ul>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/925b8022ad85b1e575871549e5c5a20a.jpg" width="210">            </div>        </li>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/0cf05cc8d870d4173d36fc08bc0835e5.jpg" width="210">            </div>        </li>    </ul>    <ul>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/1aa6448d4e488815174d77af2d79176b.jpg" width="210">            </div>        </li>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/9cb0b76b4dd540721e7837cc30488b4f.jpg" width="210">            </div>        </li>    </ul>    <ul>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/185b74db5d3ae1e477891aae289d95e6.jpg" width="210">            </div>        </li>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/8fecf02dacd818410879f5efa0cd34cf.jpg" width="210">            </div>        </li>    </ul>    <ul>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/d1b9392adcdee5d54a596a1eeca51233.jpg" width="210">            </div>        </li>        <li>            <div class="img">                <img src="/d/file/p/2020/01-27/35d3795e9036e82cd92f1edfe9d988e2.jpg" width="210">            </div>        </li>    </ul></div></body></html>

上一篇：CSS3感应鼠标背景闪烁和图片缩放效果

下一篇：纯CSS3实现的表单输入高亮效果

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注