CSS + DIV 经典布局，DIV统一自适应高度

最新推荐文章于 2023-10-23 11:27:45 发布

gladtomeetyou

最新推荐文章于 2023-10-23 11:27:45 发布

阅读量1.5k

点赞数

分类专栏： Web开发 Web设计 CSS

本文链接：https://blog.csdn.net/gladtomeetyou/article/details/8161372

版权

Web开发同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

Web设计

12 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS + DIV 经典布局，DIV统一自适应高度

布局：

左右栏宽多固定，中间栏宽度自适应；

各栏高度统一自适应；

代码：

<!DOCTYPE HTML>
<html>
	<head>

	</head>

	<style>
		#wrap {
			overflow: hidden;
		}

		div {
			word-wrap: break-word;
		}
		#left {
			background: red;
			float: left;
			width: 200px;
		}
		#center {
			background: green;
			margin: 0 200px 0 200px;
		}
		#right {
			background: blue;
			float: right;
			width: 200px;
		}
		#left, #right, #center {
			padding-bottom: 100000px;
			margin-bottom: -100000px;
		}
	</style>

	<body>
		<div id="wrap">
			<div id="left">
				leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft
			</div>

			<div id="right">
				rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
			</div>
			<div id="center">
				centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter
			</div>
		</div>
		
	</body>

</html>