2021-09-18

最新推荐文章于 2025-12-26 14:47:21 发布

原创最新推荐文章于 2025-12-26 14:47:21 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

浮动

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/浮动.css"/>
	</head>
	<body>
		<!-- bigbox外部大盒子 -->
		<div class="bigBox">
		<!-- 左边红色盒子 -->
			<div class="bigbox1">盒子一</div>
			<!-- 中间橙色绿色两个小盒子外边的大盒子 -->
			<div class="bigbox2">
			<div class="box2">盒子二</div>
			<div class="box3">盒子三</div>
			</div>
			<!-- 右边黄色蓝色两个小盒子外边的大盒子 -->
			<div class="bigbox3">
			<div class="box4">盒子四</div>
			<div class="box5">盒子五</div>
			</div>
		</div>
		
	</body>
</html>

CSS

/* 外部大盒子 */
	.bigBox {
		width: 608px;
		height: 308px;
	}

	/* 左边红色盒子 */
	.bigbox1 {
		background-color: red;
		width: 200px;
		height: 300px;
		float: left;
	}

	/* 中间包裹橙色绿色两个小盒子的盒子 */
	.bigbox2 {
		width: 400px;
		height: 150px;
		float: left;
	}

	/* 右边包裹黄色蓝色小盒子外边的大盒子 */
	.bigbox3 {
		width: 400px;
		height: 150px;
		float: left;
	}

	/* 橙色盒子 */
	.box2 {
		background-color: orange;
		width: 200px;
		height: 150px;
		float: left;
	}

	/* 黄色盒子 */
	.box3 {
		background-color: yellow;
		width: 200px;
		height: 150px;
		float: left;
	}

	/* 绿色盒子 */
	.box4 {
		background-color: green;
		width: 200px;
		height: 150px;
		float: left;
	}

	/* 蓝色盒子 */
	.box5 {
		background-color: blue;
		width: 200px;
		height: 150px;
		float: left;
	}