本文介绍了如何利用CSS的flex-wrap属性和百分比宽度创建一个九宫格布局，展示了如何在HTML中应用这些样式来展示1到9的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格布局</title>
<!-- <style>
.box {
overflow: hidden;
}
ul {
/* flex-wrap换行 */
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
.box li {
width: 30%;
height: 30%;
margin-left: 5px;
margin-bottom: 5px;
}
.box li:nth-of-type(3n){
/* 每第3个元素 */
margin-right: 0;
}
.box li:nth-of-type(n+7){
/* 第7个元素开始的所有元素 */
margin-bottom: 0;
};
</style> -->
<style>
.box{
overflow: hidden;
}
.box ul{
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
ul li{
width: 30%;
height: 30%
}
ul li:nth-of-type(3n){
margin-right: 0;
}
ul li:nth-of-type(n+7){
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
