css写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式

496 阅读1分钟
<!-- <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式</title>
  <style>
	/* html,body{
		margin: 0;
		width: 100%;
	}
	#leftDiv,#rightDiv{
		width: 200px;
		height: 200px;
		position: absolute;
		top: 0;
	}
	#leftDiv{
		background: #16A05D;
		left: 0;
	}
	#rightDiv{
		background: #DC5044;
		right: 0;
	}
	#centerDiv{
		background: #FFCD41;
		height: 200px;
	} */


  /* *{
		margin: 0;
		padding: 0;
	}
	#leftDiv,#rightDiv{
		width: 200px;
		height: 200px;
	}
	#leftDiv{
		background: #16A05D;
		float: left;
	}
	#rightDiv{
		background: #DC5044;
		float: right;
	}
	#centerDiv{
		background: #FFCD41;
		height: 200px;
    position: absolute;
    left: 200px;
    right: 200px;
	} */
  </style>
 </head>
 <body>
	<div id="centerDiv">中间div</div>
	<div id="leftDiv">左边div</div>
	<div id="rightDiv">右边div</div>
 </body>
</html> -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式</title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	#contentDiv{
		width: 100%;
		display: flex;
		height: 200px;
	}
	#leftDiv,#rightDiv{
		width: 200px;
		height: 200px;
	}
	#leftDiv{
		background: #16A05D;
	}
	#rightDiv{
		background: #DC5044;
	}
	#centerDiv{
		background: #FFCD41;
		height: 200px;
		flex: 1;
	}
  </style>
 </head>
 <body>
	<div id="contentDiv">
		<div id="leftDiv">左边div</div>	
		<div id="centerDiv">中间div</div>
		<div id="rightDiv">右边div</div>
	</div>
 </body>
</html>