左右两列定宽，中间如何自适应？

方法1：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1 {
				width: 100%;
				margin: 0 auto;
			}
			
			#d2 {
				width: 200px;
				float: left;
				background-color: #960;
			}
			
			#d3 {
				width: 200px;
				float: right;
				background: #6FF;
			}
			
			#d4 {
				margin-left: 200px;
				margin-right: 200px;
				background-color: #9F3;
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<div id="d2">左侧部分的内容</div>
			<div id="d3">左侧部分的内容</div>
			<div id="d4">中间内容，自适应宽度</div>
		</div>
	</body>

</html>

方法2：左右两侧采用绝对定位，中间同样采用margin-left margin-right方法。如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			#d1 {
				position: relative;
				width: 100%;
				margin: 0 auto;
			}
			
			#d2 {
				position: absolute;
				width: 200px;
				left:0;
				background-color: #960;
			}
			
			#d3 {
				position: absolute;
				right:0;
				width: 200px;
				background: #6FF;
			}
			
			#d4 {
				margin-left: 200px;
				margin-right: 200px;
				background-color: #9F3
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<div id="d2">左侧部分的内容</div>
			<div id="d3">左侧部分的内容</div>
			<div id="d4">中间内容，自适应宽度</div>
		</div>
	</body>

</html>

方法3：flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html *{
				padding:0;
				margin:0;
			}
			#con{
				height:300px;
				display: flex;
			}
			#center{
				flex:1;
				background-color: yellow;
			}
			#left{
				width:200px;
				background-color: blue;
			}
			#right{
				width:200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<section id="con">
			<div id="left">
				
			</div>
			<div id="center">
				
			</div>
			<div id="right">
				
			</div>
		</section>
	</body>
</html>

　　

　

还有下面这些方法：网格布局（grid），表格布局（table-cell）　

posted @ 2018-03-25 21:28  小智是小白  阅读(191)  评论(0)    收藏  举报