calc方法三栏布局思路--小技巧 

calc()函数：动态计算长度值的函数，css3新增
    语法：calc(数学表达式)
    支持+、-、*、/运算，先算括号里面的
    注意：运算符前后添加空格
    兼容性IE9+
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap {
				background: yellow;
			}

			.wrap div {
				min-height: 200px;
			}

			.wrap .left {
				width: 200px;
				background: pink;

				float: left;
			}

			.wrap .center {
				background: #f0f;

				float: left;
				width: calc(100% - (200px + 300px));
			}

			.wrap .right {
				width: 300px;
				background: lightcoral;

				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 使用calc()函数实现自适应三栏布局 -->
		<div class="wrap">
			<div class="left">left</div>
			<div class="center">中间内容</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

 

posted @ 2020-03-04 13:19  JackieDYH  阅读(1)  评论(0)  编辑  收藏  举报  来源