首页 >web前端 >css教程 >css怎么实现两列布局

css怎么实现两列布局

青灯夜游
青灯夜游原创
2021-07-22 15:33:426139浏览

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

css怎么实现两列布局

本教程操作环境: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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn