• 技术文章 >web前端 >css教程

    css怎么实现两列布局

    青灯夜游青灯夜游2021-07-22 15:34:13原创88

    方法:1、两个盒子元素都设置“dislpay:inline-block”;2、两个盒子元素设置浮动;3、左侧定宽元素浮动,右侧元素设置margin-left,且值大于定宽元素的宽度;4、浮动+BFC;5、绝对定位+margin-left等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    一、什么是两列布局

      两列布局分为两种,一种是左侧定宽、右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间)。在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能,下面将分别介绍实现方式。

    二、左侧定宽、右侧自适应如何实现?

    1.双inline-block

        原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样,可以给元素设置vertical-align:top调整。

        缺点:由于父元素设置了font-size为0,子元素内文字不会显示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
               *{
                   padding: 0;
                   margin: 0;
               }
                .box{
                    height: 600px;
                    width: 100%;
                    font-size:0;
                }
                .left{
                    display: inline-block;
                    width: 100px;
                    height: 200px;
                    background-color: red;
                    vertical-align: top;
                     
                }
                .right{
                    display: inline-block;
                    width: calc(100% - 100px);
                    height: 400px;
                    background-color: blue;
                    vertical-align: top;
                }
                 
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left">
                    <span>1234</span>
                </div>
                <div class="right">
                    <span>1234</span>
                </div>
            </div>
        </body>
    </html>

    2.双浮动

        原理:两个元素设置浮动,右侧自适应元素宽度使用calc函数计算

        缺点:父元素需要清除浮动

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .box{
                    height: 600px;
                    width: 100%;
     
                }
                .left{
                    float: left;
                    width: 100px;
                    height: 200px;
                    background-color: red;
                }
                .right{
                    float: left;
                    width: calc(100% - 100px);
                    height: 400px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left">
                    <span>
                        123adadadddddddddddddddddddddddddddddddddddddddd
                    </span>
                </div>
                <div class="right"></div>
            </div>
        </body>
    </html>

    3.浮动+margin

        原理:左侧定宽元素浮动,右侧自适应元素设置margin-left的值大于定宽元素的宽度即可

        缺点:父元素需要清除浮动

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .box{
                    height: 600px;
                    width: 100%;
     
                }
                .left{
                    float: left;
                    width: 100px;
                    height: 200px;
                    background-color: red;
                }
                .right{
                    margin-left: 100px;
                    height: 400px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left">
                    <p>1234</p>
                </div>
                <div class="right">
                    <p>1234</p>
                </div>
            </div>
        </body>
    </html>

    4.浮动+BFC

        原理:父元素设置overflow:hidden,左侧定宽元素浮动,右侧自适应元素设置overflow:auto创建BFC

        缺点:左侧元素的内容如果超过设定宽度会重叠到右侧元素上

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .box{
                    height: 600px;
                    width: 100%;
                    overflow: hidden;
                }
                .left{
                    float: left;
                    width: 100px;
                    height: 200px;
                    background-color: red;
                }
                .right{
                    overflow: auto;
                    height: 400px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left">111111111111111111111111</div>
                <div class="right">111111111111111111111111111111111111111111111</div>
            </div>
            <div class="right"></div>
        </body>
    </html>

    5.absolute+margin-left

        原理:父元素相对定位,左侧元素绝对定位,右侧自适应元素设置margin-left的值大于定宽元素的宽度

        缺点:父元素设置了相对定位

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .box{
                    height: 600px;
                    width: 100%;
                    position: relative;
                }
                .left{
                    position: absolute;
                    width: 100px;
                    height: 200px;
                    background-color: red;
                }
                .right{
                    margin-left: 100px;
                    height: 400px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>

    6.flex布局

        原理:父元素设置display:flex,自适应元素设置flex:1

        缺点:存在兼容性问题,IE10以下不支持

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .box{
                    height: 600px;
                    width: 100%;
                    display: flex;
                }
                .left{
                    width: 100px;
                    height: 200px;
                    background-color: red;
                }
                .right{
                    flex: 1;
                    height: 400px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>

    三、左右两侧元素都自适应

    严格来讲,并不算两个元素都是自适应,只是将上面的定宽改为由子元素撑开而已

    1.浮动+BFC

    原理和上面一样,只是左侧元素的宽度没有设置,由子元素撑开

    2.table布局

    原理:父元素display:table,左侧元素外围用一个div包裹,该div设置display:table-cell,width:0.1%(保证最小宽度),左侧元素内部设置margin-right,右侧元素设置display:table-cell。

    缺点:IE7及以下不支持,当display:table时,padding失效,父元素的line-height属性失效,当display:table-cell时,margin失效。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .parent{
                    display: table;
                    width: 100%;
                     
                }
                .box{
                    display: table-cell;
                    width: 0.1%;
                }
                .left{
                    margin-right: 20px;
                    background-color: red;
                    height: 200px;
                }   
                .right{
                    display: table-cell;
                    background-color: blue;
                    height: 300px;
                }
            </style>
        </head>
        <body>
            <div class="parent">
                <div class="box">
                    <div class="left">126545453dddddddd453453453</div>
                </div>
                <div class="right">12121</div>
            </div>
        </body>
    </html>

    3.flex布局

        原理、缺点同上面的flex布局

    4.grid布局

        原理:父元素设置display:grid,grid-template-columns:auto 1fr;(这个属性定义列宽,auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位,表示剩余空间做等分)grid-gap:20px(行间距)

        缺点:兼容性太差,IE11都不支持,谷歌57以上才可以

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .parent{
                    display:grid;
                    grid-template-columns:auto 1fr;
                    grid-gap:20px
                } 
                .left{
                    background-color: red;
                    height: 200px;
                }
                .right{
                    height:300px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div class="parent">
                <div class="left">1111111111111111111111111</div>
                <div class="right"></div>
            </div>
        </body>
    </html>

    (学习视频分享:css视频教程

    以上就是css怎么实现两列布局的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 两列布局
    上一篇:css怎么实现心形 下一篇:css如何添加下划线
    第16期线上培训班

    相关文章推荐

    • css怎么实现文字横排• css怎么实现波浪线边框• css3ps如何安装• css怎么实现不透明度渐变• asp怎样引入css样式• css高度设置百分比不生效怎么办• 怎么加载css文件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网