利用css中column将图片分栏显示
<div class="waterfall-container">
<div class="waterfall-item" style="height:100px">1</div>
<div class="waterfall-item" style="height:300px">2</div>
<div class="waterfall-item" style="height:400px">3</div>
<div class="waterfall-item" style="height:100px">4</div>
<div class="waterfall-item" style="height:300px">5</div>
<div class="waterfall-item" style="height:400px">6</div>
<div class="waterfall-item" style="height:400px">7</div>
<div class="waterfall-item" style="height:300px">8</div>
<div class="waterfall-item" style="height:700px">9</div>
<div class="waterfall-item" style="height:200px">10</div>
</div>
css
* {
margin: 0;
padding: 0;
}
.waterfall-container {
width: 100%;
padding: 20px;
/* 设置列数 */
column-count: 2;
/* 设置列间隙 */
column-gap: 1px;
}
.waterfall-item {
width: 100%;
height: 100%;
background-color: #ddd;
color: #fff;
font-size: 40px;
text-align: center;
text-shadow: 0 0 10px gray;
margin-bottom: 10px;
}
.waterfall-item:nth-of-type(1) {
background-image: url('./img/1.jpg');
}
.waterfall-item:nth-of-type(2) {
background-image: url('./img/2.jpg');
}
.waterfall-item:nth-of-type(3) {
background-image: url('./img/3.jpg');
}
.waterfall-item:nth-of-type(4) {
background-image: url('./img/4.jpg');
}
.waterfall-item:nth-of-type(5) {
background-image: url('./img/5.jpg');
}
.waterfall-item:nth-of-type(6) {
background-image: url('./img/6.jpg');
}
.waterfall-item:nth-of-type(7) {
background-image: url('./img/7.jpg');
}
.waterfall-item:nth-of-type(8) {
background-image: url('./img/8.jpg');
}
.waterfall-item:nth-of-type(9) {
background-image: url('./img/9.jpg');
}
.waterfall-item:nth-of-type(10) {
background-image: url('./img/10.jpg');
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果