三栏布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="U

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        1。 div 的 width默认是auto，高度是文字或者height决定
        2。 浮动 （注意center要在left和right后面，不然会掉下去）
        .left{
            float: left;
            width: 300px;
            background: red;
            height: 100px;
        }
        .right{
            float: right;
            width: 300px;
            background: pink;
            height: 100px;
        }
        .center{
            background: yellow;
            height: 100px;
        }

        3。 position 定位
        .left{
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
            height: 100px;
        }
        .right{
            position: absolute;
            right: 0;
            width: 300px;
            background: pink;
            height: 100px;
        }
        .center {
            position: absolute;
            right: 300px;
            left: 300px;
            background: yellow;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>
</html>