精华内容
下载资源
问答
  • CSS 三栏布局

    千次阅读 2018-05-16 00:02:58
    如果现在让你去实现这么一个三栏布局,你会怎么做呢? 利用绝对定位 我觉得这是比较古老和容易想到的方式。当初上大学刚接触 CSS 的时候,看到过一个网页,整站都是用绝对定位布局的。当时,觉得理所当然,布局就...

    三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站,比如CSDN淘宝等。基本都是两侧固定宽度,中间自适应。

    如果现在让你去实现这么一个三栏布局,你会怎么做呢?

    利用绝对定位

    我觉得这是比较古老和容易想到的方式。当初上大学刚接触 CSS 的时候,看到过一个网页,整站都是用绝对定位布局的。当时,觉得理所当然,布局就该这么做…

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="main">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore sapiente adipisci ullam quo dolor recusandae modi, iste quidem non reiciendis minus quia numquam aliquid. Vitae dolores dignissimos laboriosam nobis cupiditate!</div>
        <div class="left">左侧栏</div>
        <div class="right">右侧栏</div>
    </div>
    
    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        background-color: #f00;
    }
    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        background-color: #00f;
    }
    .main {
        position: absolute;
        top: 0;
        left: 100px;
        right: 200px;
        background-color: #0f0;
    }
    

    特点

    • 简单、粗暴
    • 采用了 absolute,导致父元素脱离了文档流,那所有的子元素也需要脱离文档流。如果页面复杂,那开发的难度可想而知。

    利用浮动

    浮动是 CSS 中应用比较广的特性,这也是很快就能想到的一种实现三栏布局的方式。

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="left">左侧栏</div>
        <div class="right">右侧栏</div>
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias consequatur facere aperiam distinctio debitis in voluptatum quas blanditiis culpa illo minus accusantium atque quaerat unde, architecto odit! Itaque, eos.</div>
    </div>
    
    .left {
        float: left;
        width: 100px;
        background-color: #f00;
    }
    .right {
        float: right;
        width: 200px;
        background-color: #00f;
    }
    .main {
        overflow: hidden;
        background-color: #0f0;
    }
    

    特点

    • 简单,兼容性好
    • 当中间内容高于两侧时,两侧高度不会随中间内容变高而变高

    利用弹性盒子布局

    弹性盒子布局即 flex 布局,是 W3C 于 2009 年提出的一种新的布局方案,可以简便、完整、响应式地实现各种页面布局。

    这里写图片描述

    尽管这种布局方式已经得到了大多数现代浏览器的支持,但是在万恶的 IE8 等还是无可奈何。不过在移动端 ,这种布局正大放异彩。如果你之前没有了解过它,建议现在开始掌握它,它将让你在移动端开发式事半功倍,甚至让你爱上页面布局。

    Flex 基础:菜鸟教程的Flex 布局语法教程

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="left">左侧栏</div>
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores maxime ullam laudantium ex modi sapiente, iure reprehenderit non error, maiores quas provident? Quibusdam voluptas laudantium eius, repudiandae rerum asperiores?</div>
        <div class="right">右侧栏</div>
    </div>
    
    .container {
        display: flex;
    }
    .left {
        flex: 0 0 100px;
        background-color: #f00;
    }
    .main {
        flex: 1;
        background-color: #0f0;
    }
    .right {
        flex: 0 0 200px;
        background-color: #00f;
    }
    

    特点

    • 简单、优雅
    • 未来趋势
    • 可在移动端尽情使用
    • 兼容性差一点,不支持 IE8、IE9

    PS:有人可能怀疑现在还有 IE8 用户吗?不要怀疑,博主家里就有一台老式 XP 机器,上面的浏览器就是 IE8。

    利用负边距和浮动

    前面介绍的几种实现方式都是较为简单的,下面讲一讲比较复杂一点的实现方式。

    我想接触前端稍微久一点的人都应该熟悉或者听过 圣杯布局双飞翼布局 吧。它们的结构恰好是三栏的,这里介绍一下 双飞翼布局圣杯布局和其原理类似,只是有一点小区别。更多细节,请参考https://blog.csdn.net/zhoulei1995/article/details/80161240

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="left">左侧栏</div>
        <div class="content">
            <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur cum consectetur nihil ipsam nemo maiores, magni soluta quam saepe aliquid iste molestias fuga velit animi esse eveniet est dolorum mollitia?</div>
        </div>
        <div class="right">右侧栏</div>
    </div>
    
    .left {
        position: relative;
        float: left;
        width: 100px;
        margin-right: -100px;
        background-color: #f00;
    }
    .right {
        position: relative;
        float: right;
        width: 200px;
        margin-left: -200px;
        background-color: #00f;
    }
    .content {
        float: left;
        width: 100%;
        background-color: #0f0;
    }
    .main {
        margin: 0 200px 0 100px;
    }
    

    特点

    • 兼容性好
    • 中间部分在最上面,可以保证优先渲染
    • 实现相对复杂

    利用表格布局

    算是一种比较老的布局方式,以前很多人都是用 <table> 标签来布局,后来 div + css 兴起后,这种方式逐渐消亡。

    虽然 <table> 标签缺乏灵活性,但使用 css 中的 display: table,有时还蛮有奇效。

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="left">左侧栏</div>
        <div class="main">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo hic animi veniam enim libero iure beatae modi molestias aliquid eaque ullam, nihil iste velit ex sed assumenda temporibus, tempora consectetur.</div>
        <div class="right">右侧栏</div>
    </div>
    
    .container {
        display: table;
    }
    .left {
        display: table-cell;
        width: 100px;
        background-color: #f00;
    }
    .right {
        display: table-cell;
        width: 200px;
        background-color: #00f;
    }
    .main {
        display: table-cell;
        background-color: #0f0;
    }
    

    特点

    • 简单
    • 缺乏点灵活性

    利用网格布局

    最后介绍一种比较新潮的实现方式。既然是一种非常新的布局方式,那么其兼容性就不那么好看了。
    这里写图片描述

    更多细节可以参考:http://www.css88.com/archives/8506

    效果

    这里写图片描述

    代码

    <div class="container">
        <div class="left">左侧栏</div>
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis, neque odio at, saepe unde officiis nesciunt deleniti quidem delectus necessitatibus reiciendis nulla. Praesentium voluptates, perspiciatis natus fuga dicta tempora!</div>
        <div class="right">右侧栏</div>
    </div>
    
    .container {
        display: grid;
        grid-template-columns: 100px auto 200px;
    }
    .left {
        background-color: #f00;
    }
    .right {
        background-color: #00f;
    }
    .main {
        background-color: #0f0;
    }
    

    特点

    • 简单
    • 新颖
    • 兼容性很差

    所有代码均在 chrome 66.0.3359.170 (正式版本)进行测试

    展开全文
  • css布局:table布局、两栏布局、三栏布局

    一、最初的布局——table

    最初的时候,网页简单到可能只有文字和链接。这时候,大家最常用的就是table。因为table可以展示出多个块的排布。这种布局现在应该不常用了,因为在形色单一时,使用起来方便。但是,现在的网页变得越来越复杂,适配的问题也是越来越多,这种布局已经不再适用。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                table{
                    width: 100%;
                    height: 600px;
                    text-align: center;
                    font-size: 100px;
                }
            </style>
        </head>
        <body>
            <table border="1">
                <tr>
                    <td>左栏</td>
                    <td>中间</td>
                    <td>右栏</td>
                </tr>
            </table>
        </body>
    </html>

    这里写图片描述

    二、两栏布局

    两栏布局:一栏定宽,一栏自适应。这样子做的好处是定宽的那一栏可以做广告,自适应的可以作为内容主体。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                .left{
                      width: 200px;
                      height: 600px;
                      background: green;
                      float: left;
                      display: table;
                      text-align: center;
                      line-height: 600px;
                      color: #fff;
                    }
    
                    .right{
                      margin-left: 210px;
                      height: 600px;
                      background: blue;
                      text-align: center;
                      line-height: 600px;
                    }
            </style>
        </head>
        <body>
            <div class="left">定宽</div>
            <div class="right">自适应</div>
        </body>
    </html>

    这里写图片描述

    三、三栏布局

    三栏布局:两边定宽,然后中间的width是auto的,可以自适应内容,再加上margin边距,来进行设定。
    方法一:使用左右两栏使用float属性,中间栏使用margin属性进行撑开

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                .left{
                      width: 200px;height: 600px; background: red; float: left;    
                    }
                    .right{
                      width: 150px; height: 600px; background: green; float: right;
                    }
                    .middle{
                      height: 600px; background: yellow; margin-left: 220px; margin-right: 160px;
                    }
            </style>
        </head>
        <body>
            <div class="left">左栏</div>
            <div class="right">右栏</div>
            <div class="middle">中间栏</div>
        </body>
    </html>

    这里写图片描述
    缺点是:1. 当宽度小于左右两边宽度之和时,右侧栏会被挤下去;2. html的结构不正确


    方法二:使用position定位实现,即左右两栏使用position进行定位,中间栏使用margin进行定位

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                .left{
                background: pink;
                width: 200px;
                height: 600px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .middle{
                height: 600px;
                margin: 0 220px;
                background: blue;
            }
            .right{
                height: 600px;
                width: 200px;
                position: absolute;
                top: 0;
                right: 0;
                background: yellow;
            }
            </style>
        </head>
        <body>
            <div class="left">左栏</div>
            <div class="middle">中间栏</div>
            <div class="right">右栏</div>
        </body>
    </html>

    这里写图片描述
    好处是:html结构正常。
    缺点是:当父元素有内外边距时,会导致中间栏的位置出现偏差。


    方法三:使用float和BFC配合圣杯布局
    将middle的宽度设置为100%,然后将其float设置为left,其中的main块设置margin属性,然后左边栏设置float为left,之后设置margin为-100%,右栏也设置为float:left,之后margin-left为自身大小。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                .wrapper{
                    overflow: hidden;  //清除浮动
                }
                .middle{
                    width: 100%;
                    float: left;
                }
                .middle .main{
                    margin: 0 220px;
                    background: pink;
                }
                .left{
                    width: 200px;
                    height: 300px;
                    float: left;
                    background: yellow;
                    margin-left: -100%;
                }
                .right{
                    width: 200px;
                    height: 300px;
                    float: left;
                    background: grey;
                    margin-left: -200px;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <div class="middle">
                    <div class="main">中间</div>
                </div>
                <div class="left">
                    左栏
                </div>
                <div class="right">
                    右栏
                </div>
            </div>
        </body>
    </html>

    这里写图片描述
    缺点是:1. 结构不正确 2. 多了一层标签。


    方法四:flex布局

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
            <style type="text/css">
                .wrapper{
                    display: flex;
                }
                .left{
                    width: 200px;
                    height: 600px;
                    background: pink;
                }
                .middle{
                    width: 100%;
                    height: 600px;
                    background: yellow;
                    marign: 0 20px;
                }
                .right{
                    width: 200px;
                    height: 600px;
                    background: blue;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <div class="left">左栏</div>
                <div class="middle">中间</div>
                <div class="right">右栏</div>
            </div>
        </body>
    </html>

    这里写图片描述
    除了兼容性,一般没有太大的缺陷


    end、、、、、、

    展开全文
  • 可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间部分做自适应的种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看...
  • 三栏自适应布局

    千次阅读 2019-01-16 19:50:27
    实现三栏布局1.使用flex布局2.使用浮动float3.使用定位position4.使用表格布局5.使用网布局 实现左中右三栏布局,左右为固定宽度,中间宽度随父元素宽度变化。 1.使用flex布局 父元素设置display:flex; 左右盒子...


    实现左中右三栏布局,左右为固定宽度,中间宽度随父元素宽度变化。
    在这里插入图片描述

    1.使用flex布局

    父元素设置display:flex; 左右盒子宽度固定,中间盒子设置flex:1;

    		.bigbox {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                display: flex;
            }
            .left {
                width: 200px;
                background-color: red;
            }
            .center {
                flex: 1;
                background-color: orange;
            }
            .right {
                width: 200px;
                background-color: blue;
            }
    

    2.使用浮动float

    左右盒子设置固定宽度并浮动,中间盒子设置100%宽度,需要注意,如果设置浮动,需要中间盒子和右边盒子调位,否则右边盒子会掉落

    		.bigbox {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
            .left {
                float: left;
                width: 200px;
                background-color: red;
            }
            .center {
                width: 100%;
                background-color: orange;
            }
            .right {
                float: right;
                width: 200px;
                background-color: blue;
            }
    

    3.使用定位position

    父盒子设置相对定位position:relative; 左右盒子设置固定宽度并绝对定位position:absolution,中间盒子设置100%宽度,需要注意,如果不设置top:0,右边盒子会掉落

    		.bigbox {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                position: relative;
            }
            .left {
                position: absolute;
                left: 0;
                width: 200px;
                background-color: red;
            }
            .center {
                background-color: orange;
            }
            .right {
                position: absolute;
                right: 0;
                top: 0;
                width: 200px;
                background-color: blue;
            }
    

    4.使用表格布局

    父盒子设置display:table; 子元素设置display:table-cell; PS.父元素需设置固定宽度

    		.bigbox {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                display: table;
            }
            .left {
                width: 200px;
                background-color: red;
                display: table-cell;
            }
            .center {
                background-color: orange;
                display: table-cell;
            }
            .right {
                width: 200px;
                background-color: blue;
                display: table-cell;
            }
    

    5.使用网格布局

    父盒子设置display:grid;以网格模式显示,设置grid-template-columns: 200px auto 200px;
    类似bootstarp,可以设置等份,单位fr; ex:grid-template-columns: 1fr 1fr 1fr;(三等分)

    		.bigbox {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                display: grid;
                grid-template-columns: 200px auto 200px;
            }
            .left {
                background-color: red;
            }
            .center {
                background-color: orange;
            }
            .right {
                background-color: blue;
            }
    

    在这里插入图片描述

    展开全文
  • CSS圣杯布局(三栏布局

    千次阅读 2017-08-10 15:53:16
    圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。三栏全部float:left浮动,并配合left和right属性。原理(1.浮动2.负边距):浮动元素有脱离文档流的特性,负值使得自身...

    圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。三栏全部float:left浮动,并配合left和right属性。

    原理(1.浮动2.负边距):

    浮动元素有脱离文档流的特性,负值使得自身向左移动

    当三个边长为100px的盒子margin-left均为-20px时出现如下效果;


    可以看出3个盒子都向左移动25px;
    box1自身向左移动了25px,box2又覆盖了其25px,所以我们就看到了“宽度”为50px的box1
    box2,box3以此类推!

    当margin-left为-50px时:


    如果只给盒子3设置margin-left为-200px:


    此时盒子3向左偏移了200px,完全将盒子1覆盖了,

    当margin-left为-100%将移动到上一层的第一个位置。

    负边距  margin-left为负值,且两个元素不在一行的时候(可以用元素float:left,width:100%实现)margin-left可以吃掉兄弟元素的margin.想像一下,假设width:99%,右边留一条缝隙,当margin-left为负值,即可让右边的这条缝隙向左走

    即当使用margin左负值,超过自身的宽度时,这个元素在第一行就有位置了。 而margin的负值达到-100%时,恰能达到窗口最左侧。。

    这个100%为父元素的宽度。同理我们假设要挤的元素宽度为200px,则 “挤”200px就可以让这个元素完全挤到兄弟元素的右边去。(摘自http://99jty.com/?p=432


    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>圣杯布局</title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;}
            body{
                min-width: 700px;}
            h3{
                padding:0 20px}
        .header{
            width: 100%;
            height: 40px;
            background-color: #646464;
        }
        .footer{
            width: 100%;
            height: 40px;
            margin-top: 300px;
            background-color: #646464;
    
        }
        .middle{
            float: left;
            width: 100%;
            height: 300px;
            text-align: center;
            background-color: #ffd36a;
        }
         .left{
            float:left;
            width: 200px;
            height: 300px;
            margin-left: -100%;
            background-color: #ff63bd;
            }
         .right{
             float: left;
             width: 200px;
             height: 300px;
             margin-left: -200px;
             background-color: #a2ff95;
            }
        </style>
    </head>
    <body>
    <div class="header">
        <h3>header</h3>
    </div>
    <div class="middle">
        <h3>middle</h3>
    </div>
    <div class="left">
        <h3>left</h3>
    </div>
    <div class="right">
        <h3>right</h3>
    </div>
    <div class="footer">
        <h3>footer</h3>
    </div>
    </body>
    </html>

    展开全文
  • 主要介绍了CSS经典三栏布局方案(6种方法)的相关资料,详细的介绍了6种三栏布局的方法,具有一定的参考价值,有兴趣的可以了解一下
  • 页面布局之经典三栏布局

    千次阅读 2018-05-13 17:48:26
    我们在学习前端技术时,首先避免不了的就是你的页面布局问题,其中布局中比较流行的布局方式就是三栏布局,其主要要求是 三列布局,中间宽度自适应,两边定宽; 经典三列布局,也叫做圣杯布局【Holy Grail of ...
  • 布局:三栏布局(7种方法)

    万次阅读 多人点赞 2017-08-10 16:03:47
    本文就三栏布局而言,介绍了7种实现的方案。实现效果: 左右栏定宽,中间栏自适应
  • css 三栏布局 圣杯布局 双飞翼 flex

    千次阅读 2017-12-10 21:37:52
    在参考了详解 CSS 七种三栏布局技巧 后,我对三栏布局有了更深刻的认识,本文是我对上文的解读,是自己消化理解的过程,此文是为了加深理解知识而,希望可以帮到你。 示意图 简单的实现方式(流式布局和BFC三栏...
  • CSS:两栏布局,三栏布局

    千次阅读 2017-02-15 23:34:10
    栏布局方法:浮动布局 div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; } #main{ background-color:aqua; margin-left:300
  • 网页三栏布局常用方法

    千次阅读 2020-08-30 19:15:57
    三栏布局 在网页布局中算是 比较长江的种,比如淘宝等,诸多网站都是用的三栏布局 它是 两边元素固定,中间自适应,并且 中间的元素优先渲染 第种:定位 也是比较粗暴的种 定位 但本人不建议使用 布局容易混乱...
  • 精典css+DIV三栏布局, 通过比较多种方式后出的
  • 三栏布局:初学css的时候,什么是三栏布局?好高大上的样子。 简单来说: 就是网页分成三块,中间自适应,左右两边固定 应用场景:视频播放进度条,两边固定,中间进度条根据电子屏幕自适应长度。 弹性布局...
  • 自适应网页中3种三栏布局的用法

    千次阅读 2016-12-14 11:19:21
    首先解释一下什么是“三栏布局”:顾名思义,三栏布局就是在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页左右两侧,中间列永远居中,且当网页宽度大于左右两列宽度之和时,中间列可...
  • 三栏布局

    千次阅读 2016-07-08 18:14:10
    通常来说,三栏式最基本要解决的是 左右两侧固定宽度,中间列自适应宽度,另外根据浏览器从上至下的渲染原理,通常中间栏才是最主要的内容,最好能在DOM结构上 将中间栏放在更前面
  • 三栏布局–flexbox布局 </head> <body> <!--flexbox --> <section class="layout flexbox"> <style> .layout.flexbox .left-center-right{ di...
  • CSS三栏布局的四种方法

    千次阅读 2016-12-07 22:25:39
    前言总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局种或两种方法,但实际操作中也只会依赖那某种方法,...
  • css flex实现经典的三栏布局

    千次阅读 2018-02-06 15:47:41
    html> html lang="en"> head> meta charset="UTF-8"> title>flex 三栏布局title> style> *{ margin: 0; padding: 0; } .wrapper{ display: f
  • 三栏布局的5种解决方案及优缺点

    万次阅读 多人点赞 2017-11-19 12:08:44
    这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题,就没有那么简单了。看似简单的一道题,想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,085
精华内容 43,234
关键字:

写一个三栏布局