master

分支 (2)

管理

管理

master

dev_test

web-test
/
CSS三列布局四.html

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style>
			.box {
				height: 500px;
				background-color: bisque;
				position: relative;
				overflow: hidden;
				padding: 0 210px;
			}

			.box .box-content {
				height: 100%;
				float: left;
				background-color: blue;
			}

			.box .box-left {
				width: 200px;
				position: relative;
				height: 300px;
				float: left;
				left: -210px;
				margin-left: -100%;
				background-color: green;
			}

			.box .box-right {
				width: 200px;
				position: relative;
				min-height: 100%;
				float: left;
				margin-left: -200px;
				right: -210px;
				background-color: pink;
			}

			header,
			footer {
				height: 75px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<header> </header>
		<div class="box">
			<div class="box-content">
				够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
			</div>
			<div class="box-left">
				11dsdasdas不你弟弟呢单独
			</div>
			<div class="box-right">
				12酷酷酷酷酷的的是计算机技术升级的历史记录
			</div>
		</div>
		<footer>

		</footer>
	</body>
</html>