使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

作者: 清汤饺子 | 来源:发表于2018-11-26 15:26 被阅读0次

三列布局——圣杯布局
三列布局——双飞翼布局
我还是要说的布局
刷前端面经笔记（二）
实现三栏布局中间自适应的五种方法
三列布局——flex布局
双飞燕布局实现的三种方式
2019-04-01常见布局汇总（flex版本）
初级前端css面试题整理
CSS三栏自适应布局、二栏自适应布局

看例子说明

1、弹性布局方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrap{
            display: flex;
            height: 100px;
        }
        .left,.right{width: 100px;background: yellow}
        .center{background: #ccc;flex:1;}
        .child{margin-right: 10px;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left child"></div>
        <div class="center child"></div>
        <div class="right child"></div>
    </div>
</body>
</html>

image.png

2.浮动方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        .child{background: yellow;height: 100px;}
        .left{float: left;}
        .right{float: right;}
        .left,.right{width: 100px;}
        .center{margin: 0 200px;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left child"></div>
        <div class="right child"></div>
        <div class="center child"></div>
        
    </div>
</body>
</html>

image.png