<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 淘宝： */
.n {
margin: 20px auto;
width: 80%;
}
.box {
display: flex;
flex-wrap: wrap;
border: 5px solid black;
margin-left: -8px;
margin-right: -8px;
}
.box .item {
flex: 0 0 16.66666666%;
height: 120px;
background-color: rgb(255, 192, 225);
margin-bottom: 8px;
padding: 0 8px;
}
.box .item .content {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.607);
}
.w {
width: 80%;
height: 120px;
background-color: rgb(6, 5, 5);
margin: 0 auto;
}
/* 京东 */
.box2 {
display: flex;
flex-wrap: wrap;
border: 3px solid rgb(105, 23, 23);
width: 80%;
margin: 0 auto;
}
.box2 .item {
flex: 1;
width: 80px;
height: 120px;
background-color: rgb(255, 192, 225);
/* min-width: 16.666666%;
max-height: 16.666666%; */
/* calc(16.666666% - 16px) calc函数里前后项需要空格隔开 */
/* 最大最小宽度减去16px左右间距 */
min-width: calc(16.666667% - 16px);
max-height: calc(16.666667% - 16px);
margin: 0 8px 16px;
}
</style>
</head>
<body>
淘宝
<div class="n">
<div class="box">
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
</div>
<div class="w"></div>
<br><br><br><br>
京东
<div class="box2">
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
</body>
</html>
下载链接：