CSS两栏布局(四种方法)

作者: 凯凯frank | 来源:发表于2020-02-12 20:12 被阅读0次

CSS两栏布局(四种方法)
CSS布局技巧总结
css布局
绝对定位布局和浮动布局
常见布局-左侧固定，右侧自适应两栏布局
CSS实现三栏布局的方法
CSS:两栏布局
css两栏布局
CSS两栏布局
CSS 两栏布局

两栏布局，要求左边固定，右边自适应。

方法1------浮动

思路：左边容器左浮动，宽度固定，右边元素设置margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{  margin: 0;  padding: 0;  box-sizing: border-box; }
        html,body{  height: 100%;  }
        .left-panel{
            float: left;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .main-panel{
            height: 100%;
            margin-left: 200px;
            background-color: #00a2ea;
            border-left: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="left-panel">left</div>
    <div class="main-panel">main</div>
</body>
</html>

方法2------绝对定位

思路：左边容器绝对定位，宽度固定，右边元素设置margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{  margin: 0;  padding: 0;  box-sizing: border-box; }
        html,body{  height: 100%;  }
        .left-panel{
           position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .main-panel{
            height: 100%;
            margin-left: 200px;
            background-color: #00a2ea;
            border-left: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="left-panel">left</div>
<div class="main-panel">main</div>
</body>
</html>

方法3------绝对定位

思路：左边宽度固定，右边元素绝对定位，设置left，设置宽度为剩下容器的宽度(width可以使用calc计算，也可以同时设置left和right,让他自行拉伸，不用指定width)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{  margin: 0;  padding: 0; box-sizing: border-box; }
        html,body{  height: 100%;  }
        .left-panel{
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .main-panel{
            position: absolute;
            left: 200px;
            top: 0 ;
            right: 0;
            /*width: calc(100% - 200px);*/
            height: 100%;
            background-color: #00a2ea;
            border-left: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="left-panel">left</div>
<div class="main-panel">main</div>
</body>
</html>

方法4：flex布局

思路：父元素flex布局，默认方向就是水平排列。左边的子元素宽度固定，右边的子元素设置flex-grow:1;自动填充容器剩余宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{  margin: 0;  padding: 0; box-sizing: border-box; }
        html,body{  height: 100%;  }
        .container{
            display: flex;
            height: 100%;
        }
        .left-panel{
            width: 200px;
            background-color: red;
        }
        .main-panel{
            flex-grow: 1;
            background-color: #00a2ea;
            border-left: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-panel">left</div>
        <div class="main-panel">main</div>
    </div>
</body>
</html>