css完成瀑布流空白处情况粉色情况块

日期:2021-03-10 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

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; /*列之间的差别,提议设大1些*/
margin-bottom: ⑼010px; /*公式: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:


拷贝编码
编码以下:

<div class="listbox">
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i6/T1TY_lXoVoXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i5/T1BVH5Xc0XXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1_7YDXcpnXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i6/T1coXeXp0dXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1J_fMXnBoXXb1upjX_210x1000.jpg" width="210">
</div></p> <p> </li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1dDvoXmhfXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i4/T1wR3dXgdfXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i7/T11cPkXlJlXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
</ul>
</div>

上面的方式只合适纵向合理布局而且情况是单色或可反复的情况照片。

横向合理布局能够把情况切成这么1张随后平铺(灰色为列之间的间隔):


繁杂的情况块不管纵向合理布局還是横向合理布局都必须嵌套循环,要求不一样嵌套循环的部位也可不1样,在这就不举例了。

大伙儿能够依据自身的要求想1下(*^__^*) ……