如何实现三栏布局(圣杯布局、双飞翼布局)?

如何实现三栏布局(圣杯布局、双飞翼布局)?下面本篇文章给大家介绍一下实现三栏布局(圣杯布局、双飞翼布局)的四种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。

圣杯布局

圣杯HTML结构:

<div class='main'>
    <div class="middle">中间的</div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

双飞翼布局

双飞翼HTML结构为:

<div class='main'>
    <div class="middle">
        <div class="inner_middle">中间的</div>
    </div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

一、float+margin

<style type="text/css">
    .main{
        overflow: hidden;
        background: #eee;
    }
    .left{
        background: red;
        width: 200px;
        height: 280px;
        float: left;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 290px;
        float: right;
    }
    .middle{
        background: green;
        height: 300px;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>        
    </div>

说明:网上还有人用padding替换margin的方法,感兴趣的自己去查。

二、Position

<style type="text/css">
    .main{
        position: relative;
    }
    .left{
        background: red;
        height: 300px;
        width: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }    
    .right{
        background: blue;
        height: 300px;
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="center"></div>
        <div class="middle"></div>
    </div>

说明:网上有人提到这个方法在某些情况下会出现bug,具体没有深入了解过。

三、Flex

<style type="text/css">
    .main{
        display: flex;
        align-items: center;
    }
    .left{
        background: red;
        width: 200px;
        height: 300px;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 300px;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

说明:低版本的浏览器有兼容的问题,在网上也看到有人用order控制位置

四、Grid

<style type="text/css">
    .main{
        display: grid;
        height: 300px;
    }
    .left{
        background: red;
        grid-row:1;
        grid-column:1/2;
    }    
    .right{
        background: blue;
        grid-row:1;
        grid-column:4/5;
    }
    .middle{
        background: green;
        grid-row:1;
        grid-column:2/4;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

说明:grid-column一共分为5个格,“grid-column:1/2”占了第一个和第二个格,不是指占了二分之一。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。

本文转载自:https://segmentfault.com/a/1190000018183056

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是如何实现三栏布局(圣杯布局、双飞翼布局)?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏