四种方法实现──三栏布局(圣杯布局、双飞翼布局)

栏目: CSS · 发布时间: 5年前

内容简介:圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实圣杯HTML结构:双飞翼HTML结构为:

圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实

~呜

圣杯布局

圣杯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”占了第一个和第二个格,不是指占了二分之一。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Introduction to Tornado

Introduction to Tornado

Michael Dory、Adam Parrish、Brendan Berg / O'Reilly Media / 2012-3-28 / USD 23.99

Tornado is a scalable, non-blocking web server and web application framework written in Python. It is also light-weight to deploy, fun to write for, and incredibly powerful. Tornado was written with p......一起来看看 《Introduction to Tornado》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具