两列布局_a-col两边布局重叠了-CSDN博客

本文链接：https://blog.csdn.net/qq_43218276/article/details/114607504

两列布局

含义：一边定宽一边浮动
目的：使一边定宽一边浮动且有子容器的那边子容器不会出现奇怪的位置变化。
思路：
1.利用float+margin实现；
2.利用float+margin(fix)实现；
3.利用float+overflow实现；
4.利用table+table-cell实现；
5.利用position绝对定位实现；
6.利用flex属性实现；
7.利用Grid(网格)属性实现

1.利用float+margin实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            float: left;/*只设置这个的话，会脱离文档流，导致右边容器出现在他的下边，需要给右边容器设置一个左间距大小正好等于左边容器大小，*/
        }

        #right {
            /*由于并没有设置右边的宽度，所以他会自适应去占满屏幕*/
            height: 400px;
            background-color: rgb(0, 0, 0);
            margin-left: 400px;

        }

        #inner {
            height: 300px;
            background-color: green;
            /*缺点：若在右侧容器中加入一个子容器且子容器清除浮动，会造成子容器出现在父容器下方的诡异现象*/
            clear:both;
        }

    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
</body>

</html>

2.利用float+margin(fix)实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用float+margin(fix)实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
/*这种方法是通过使两个容器都加上浮动来实现效果的*/
        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            float: left;
            /* 显示 - position - 提高层级 防止被覆盖*/
            position: relative;
        }

        #right-fix{
            /*background-color: hotpink;*/
            float: right;
            width: 100%;
            margin-left: -400px;
        }

        #right {
            margin-left: 420px;
            height: 400px;
            background-color:rgb(255, 255, 78);
            

        }

        #inner {
            height: 300px;
            background-color: green;
            /*缺点：若在右侧容器中加入一个子容器且子容器清除浮动，会造成子容器出现在父容器下方的诡异现象*/
            clear:both;
        }

    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right-fix">
        <!--右侧容器的子容器-->
        <div id="right">
            <!--解决了会掉下去的情况了-->
            <div id="inner">

            </div>
        </div>
    </div>
</body>

</html>

3.利用float+overflow实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用float+overflow实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            float: left;
        }

        #right {
            height: 400px;
            background-color: rgb(0, 0, 0);
            /* BFC - 形成一个隔离容器 - 条件之一
            溢出隐藏 也是其缺点*/
            overflow: hidden;
        }

        #inner {
            height: 300px;
            background-color: green;
            clear:both;
        }

    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
</body>

</html>

4.利用table+table-cell实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用table+table-cell实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #parent{
            width: 100%;
            height: 400px;/*父元素table，子元素table-cell（相当于td），会自动去适应*/
            display: table;
        }

        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            display: table-cell;
        }

        #right {
            height: 400px;
            background-color: rgb(0, 0, 0);
            display: table-cell;
        }

        #inner {
            height: 300px;
            background-color: green;
            clear:both;
        }

    </style>
</head>
<body>
    <div id="parent">
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
    </div>
</body>

</html>

5.利用position绝对定位实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用position绝对定位实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #parent{
            position: relative;
        }
        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }

        #right {
            height: 500px;
            background-color: rgb(0, 0, 0);
            position: absolute;
            left: 400px;
            right: 0;
            top: 0;
        }

        #inner {
            height: 300px;
            background-color: green;
            clear:both;
        }

    </style>
</head>
<body>
    <div id="parent">
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
    </div>
</body>

</html>

6.利用flex属性实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.利用flex属性实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #parent{
            width: 100%;
            height: 400px;
            display: flex;
        }

        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            
        }

        #right {
            flex: 1;/*相当于100%-400*/
            height: 400px;
            background-color: rgb(0, 0, 0);
            
        }

        #inner {
            height: 300px;
            background-color: green;
            clear:both;
        }

    </style>
</head>
<body>
    <div id="parent">
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
    </div>
</body>

</html>

7.利用Grid(网格)属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.利用Grid(网格)属性实现</title>
    <!--问题：兼容性不太好-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #parent{
            width: 100%;
            height: 400px;
            /*网格布局*/
            display: grid;
            /* 每个列的宽度 左 - 400px 右 - 自适应 */
            grid-template-columns: 400px auto;


        }

        #left {
            width: 400px;
            height: 300px;
            background-color: red;
            
        }

        #right {

            height: 400px;
            background-color: rgb(0, 0, 0);
            
        }

        #inner {
            height: 300px;
            background-color: green;
            clear:both;
        }

    </style>
</head>
<body>
    <div id="parent">
    <div id="left"></div>
    <div id="right">
        <!--右侧容器的子容器-->
        <div id="inner"></div>
    </div>
    </div>
</body>

</html>