使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

2018-11-26  本文已影响0人  清汤饺子

看例子说明

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
上一篇 下一篇

猜你喜欢

热点阅读