主题
双飞翼
WARNING
面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
css
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
}
.container>div{
float: left;
}
.c{
width: 100%;
height: 100vh;
background-color: aqua;
}
.l,.r{
width: 200px;
height: 100vh;
}
.l{
background-color: red;
margin-left: -100%;
}
.r{
background-color: blue;
margin-left: -200px;
}
.main{
padding-left: 200px;
}
</style>html
<div class="container">
<div class="c">
<div class="main">中间</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>