两列布局的几种方法

最新推荐文章于 2024-06-11 12:15:54 发布

倩lq

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量781

点赞数

本文链接：https://blog.csdn.net/L666Q/article/details/103743894

版权

一、双inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        box-sizing: border-box;
    }
    #wrap{
        width: 100%;
        font-size: 0;
    }
    #left{
        width: 100px;
        height: 100px;
        display: inline-block;
        border: 1px solid #000;
    }
    #right{
        height: 100px;
        width: calc(100% - 200px);
        display: inline-block;
        border: 1px solid #000;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

缺点：为消除父元素中空格的影响需要把父元素级的font-size设置为0，如果两边高度不一样，需要加vertical-align：top

二、双float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #wrap{
        width: 100%;
        font-size: 0;
    }
    #left{
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #000;
        /* display: inline-block; */
    }
    #right{
        height: 100px;
        width: calc(100% - 200px);
        float: right;
        border: 1px solid #000;
        /* display: inline-block; */
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

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

补充：清除浮动的几种方法：

1.给父元素单独设置高度，有局限

2.为所有浮动元素后面添加空元素，在里面清楚浮动，使用clear:both;

3.给父元素定义overflow:hidden;

4.在父元素上设置after伪元素，在该元素上清楚浮动

三、float+margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #wrap{
        width: 100%;
        font-size: 0;
    }
    #left{
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #000;
        /* display: inline-block; */
    }
    #right{
        height: 100px;
        margin-left: 200px;
        /* width: calc(100% - 200px);
        float: right; */
        border: 1px solid #000;
        /* display: inline-block; */
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

该方法也需要清除浮动并且需要计算margin-left

四、absolute+margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #wrap{
        width: 100%;
        font-size: 0;
        position: relative;
        overflow: hidden;
    }
    #left{
        position: absolute;
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #000;
        /* display: inline-block; */
    }
    #right{
        height: 100px;
        margin-left: 200px;
        /* width: calc(100% - 200px);
        float: right; */
        border: 1px solid #000;
        /* display: inline-block; */
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

该方法使用了绝对定位，若是用在某个div中，需要更改父容器的position

五、float+BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #wrap{
        /* width: 100%;
        font-size: 0; */
        /* position: relative; */
        overflow: hidden;
    }
    #left{
        /* position: absolute; */
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #000;
        /* display: inline-block; */
    }
    #right{
        height: 100px;
        margin-left: 0;
        overflow: auto;
        /* width: calc(100% - 200px);
        float: right; */
        border: 1px solid #000;
        /* display: inline-block; */
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

该方法的右侧盒子通过设置overflow:auto;形成了BFC

六、flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #wrap{
        /* width: 100%;
        font-size: 0; */
        /* position: relative; */
        /* overflow: hidden; */
        display: flex;
    }
    #left{
        /* position: absolute; */
        width: 100px;
        height: 100px;
        /* float: left; */
        border: 1px solid #000;
        /* display: inline-block; */
    }
    #right{
        height: 100px;
        flex: 1;
        /* margin-left: 0; */
        /* overflow: auto; */
        /* width: calc(100% - 200px);
        float: right; */
        border: 1px solid #000;
        /* display: inline-block; */
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

倩lq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列布局的几种方法

一、双inline-block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
复制链接

扫一扫