前端面试必备技巧（一）页面布局

题目一、假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应，写出多种解决方法

回答：第一种方法：浮动解决方案

<style>
    html *{padding:0;margin: 0;}
    .layout article div{min-height:100px;}
    .layout.float .left{float: left;background: red;width: 300px;}
    .layout.float .right{float: right;background: blue;width: 300px;}
    .layout.float .center{background: green;}
</style>
<body>
    <section class="layout float">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方案</h1>
                1.这是三栏布局中间部分
                2.这是三栏布局中间部分
            </div>
        </article>    
    </section>
</body>

第二种方法：绝对定位

<style>
    html *{padding:0;margin: 0;}
    .layout article div{min-height:100px;position: absolute;}
    .layout.absolute .left{left:0;background: red;width: 300px;}
    .layout.absolute .right{right:0;background: blue;width: 300px;}
    .layout.absolute .center{left: 300px;right: 300px;background: green;}
</style>
<body>
    <section class="layout absolute">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方案</h1>
                1.这是三栏布局绝对定位部分
                2.这是三栏布局绝对定位部分
            </div>
        </article>    
    </section>
</body>

第三种方法：flex布局

<style>
    html *{padding:0;margin: 0;}
    .layout.flexbox .left-right-center{display: flex;}
    .layout article div{min-height:100px;}
    .layout.flexbox .left{background: red;width: 300px;}
    .layout.flexbox .right{background: blue;width: 300px;}
    .layout.flexbox .center{flex:1; background: green;}
</style>
<body>
    <section class="layout flexbox">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>浮动解决方案</h1>
                1.这是三栏布局flexbox中间部分
                2.这是三栏布局flexbox中间部分
            </div>
            <div class="right"></div>
        </article>    
    </section>
</body>

第四种方法：table表格布局

<style>
    html *{padding:0;margin: 0;}
    .layout.table .left-right-center{display:table;width: 100%;min-height:100px;}
    .layout article div{display: table-cell;}
    .layout.table .left{background: red;width: 300px;}
    .layout.table .center{background: green;}
    .layout.table .right{background: blue;width: 300px;}
</style>
<body>
    <!-- 表格布局，先让容器width100%与浏览器等宽，然后再设置三个div为display：table-cell -->
    <section class="layout table">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>table表格布局解决方案</h1>
                1.这是表格布局中间部分
                2.这是表格布局中间部分
            </div>
            <div class="right"></div>
        </article>    
    </section>
</body>

第五种方法：网格布局

<style>
    html *{padding:0;margin: 0;}
    .layout.grid .left-right-center{display:grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}
    .layout.grid .left{background: red;}
    .layout.grid .center{background: green;}
    .layout.grid .right{background: blue;}
</style>
<body>
    <!--网格布局 -->
    <section class="layout grid">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>grid网格布局解决方案</h1>
                1.这是网格布局中间部分
                2.这是网格布局中间部分
            </div>
            <div class="right"></div>
        </article>    
    </section>
</body>

前端面试必备技巧（一）页面布局

猜你喜欢