九宫格
利用弹性布局实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格</title>
<style>
.parent {
width: 600px;
height: 600px;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.child {
width: 200px;
height: 200px;
}
.child:nth-child(odd) {
background-color: yellow;
}
.child:nth-child(even) {
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
利用浮动实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格</title>
<style>
.parent {
width: 600px;
height: 600px;
background-color: red;
}
.child {
width: 200px;
height: 200px;
float: left;
}
.parent::after {
display:block;
content: "";
clear: both;
}
.child:nth-child(odd) {
background-color: yellow;
}
.child:nth-child(even) {
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>