div 实现田字格布局

最新推荐文章于 2022-09-07 18:51:41 发布

热带鱼2020

最新推荐文章于 2022-09-07 18:51:41 发布

阅读量2.8k

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/beguile/article/details/88375305

版权

js 专栏收录该内容

95 篇文章 0 订阅

订阅专栏

div 实现田字格布局

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div 实现田字格布局</title>

<style>
#part1{
width: 100px;
height: 100px;
background: blue;

float: left;
}

#part2{
width: 100px;
height: 100px;
background: red;

float: left;
}

#part3{      /* div 换行 */
width: 100px;
height: 100px;
background: yellow;

float: left;
clear: left;
}

#part4{
width: 100px;
height: 100px;
background: green;

float: left;
}

#part5{        /* div 换行 */
width: 100px;
height: 100px;
background: white;

float: left;
clear: left;
}

#part6{
width: 100px;
height: 100px;
background: black;

float: left;
}

</style>
</head>
<body>
<div id="part1">块1</div>
<div id="part2">块2</div>
<div id="part3">块3</div>

<div id="part4">块4</div>
<div id="part5">块5</div>
<div id="part6"><div style="color: white">块6</div></div>
</body>
</html>

又一个例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div 实现田字格布局</title>
<style>
.darkBlue{
	background: darkBlue;
}

.Gold{
	background: gold;
}

.divSize{
	width: 33%;
	height: 300px;
}

.divNormal{
	float: left;
}

.divChangeLine{      /* div 换行 */
	float: left;
	clear: left;
}
</style>
</head>
<body>
<div id="part1" class="divNormal darkBlue divSize">块1</div>
<div id="part2" class="divNormal gold divSize">块2</div>
<div id="part3" class="divNormal darkBlue divSize">块3</div>

<div id="part4" class="divChangeLine gold divSize">块4</div>
<div id="part5" class="divNormal darkBlue divSize">块5</div>
<div id="part6" class="divNormal gold divSize">块6</div>

<div id="part7" class="divChangeLine darkBlue divSize">块7</div>
<div id="part8" class="divNormal gold divSize">块8</div>
<div id="part9" class="divNormal darkBlue divSize">块9</div>
</body>
</html>