实现三行三列的效果图如图:
1.方法一:使用float计算(不推荐)
中间两端中间有间隔,不能够两端很好的贴近父级的边边(如该方法有更好的解决方案,欢迎留言)
<!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>两行三列使用函数宽度计算</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80%;
margin: 0 auto;
background-color: #eee;
}
ul {
width: 100%;
}
ul li {
display: inline-block;
list-style: none;
height: 300px;
background-color: pink;
color: #000;
margin-bottom: 10px;
width: calc(100% / 3 - 20px);
margin-right: 20px;
}
ul li:nth-child(3n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
</div>
</body>
</html>
2.方法二:使用flex布局
优点:上手比较容易,容易想
缺点:需要自行设置宽度,使用flex则中间无间隙,需要自行计算每行子盒子所占的宽度,以及间隙的内容
<!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>两行三列使用flex计算</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80%;
margin: 0 auto;
background-color: #eee;
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul li {
list-style: none;
width: 30%;
height: 300px;
background-color: pink;
color: #000;
margin-right: 5%;
margin-bottom: 10px;
}
ul li:nth-child(3n) {
margin-right: 0;
}
ul::after {
content: "";
width: 30%;
height: auto;
}
</style>
<body>
<div class="box">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
</div>
</body>
</html>
3.方法三:使用grid布局
优点:不用设置宽度,会根据需要自动设置宽度,且无需写父级的伪元素
<!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>两行三列grid布局</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80%;
margin: 0 auto;
background-color: #eee;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2% 2%;
grid-auto-flow: row;
grid-template-areas:
". . ."
". . .";
justify-content: space-around;
}
ul li {
list-style: none;
height: 300px;
background-color: pink;
color: #000;
margin-bottom: 10px;
}
</style>
<body>
<div class="box">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
</div>
</body>
</html>