Skip to content

双飞翼

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>