<!-- <!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>