0
点赞
收藏
分享

微信扫一扫

[css3] 多列布局案例

weednoah 2022-12-21 阅读 59


使用 多列划分 属性: column-count: 5;

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
background-color: rgb(253, 201, 201);
}

.box {
width: 95%;
margin: 0 auto;
/* background-color: rgb(241, 163, 163); */

/* 多列划分 */
column-count: 5;
/* background-image: url(img/a.png); */
}

.box>div {
border: 2px solid #ccc;
padding: 8px;

/* 不让多列的div折半显示,这个属性只应用在多列里面 */
break-inside: avoid;
margin-bottom: 15px;
}

.box>div>img {
width: 100%;
}

.box>div>p {
line-height: 30px;
text-align: center;
font-weight: bold;
color: slateblue;
}
</style>
</head>

<body>
<div class="box">
<div>
<img src="img/1.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/2.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/3.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/4.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/5.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/6.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/7.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>
<div>
<img src="img/8.jpg" alt="">
<p>往后余生,风雪是你</p>
</div>


</div>
</body>

</html>

[css3] 多列布局案例_ide


举报

相关推荐

0 条评论