三栏布局-原创手记-慕课网

1.通过浮动实现三栏布局。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.left{
background:red;
float:left;
width:300px;
height:100px;
}
.right{
background:yellow;
float:right;
width:300px;
height:100px;
}
.center{
background: blue;
margin-left:300px;
margin-right:300px;
height:100px;
}

</style>

</head>
<body>

<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>

2.通过绝对定位实现三栏布局

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
position:relative;
}
.left{
background:red;
position:absolute;
left:0;
top:0;
width:300px;
height:100px;

    }
    .right{
        background:yellow;
        position:absolute;
        right:0;
        top:0;
        width:300px;
        height:100px;

    }
    .center{
        background: blue;       
        height:100px;
        margin-left:300px;
        margin-right:300px;

    }

</style>

</head>
<body>

<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>

3.通过display：table实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{

        display:table;
        width:100%;
    }
    .left{
        background:red;
        display:table-cell;
        width:300px;
        height:100px;

    }
    .right{
        background:yellow;
        display:table-cell;
        width:300px;
        height:100px;

    }
    .center{
        display:table-cell;
        background: blue;       
        height:100px;

    }

</style>

</head>
<body>

<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

</div>

</body>
</html>

4通过flex实现三栏布局

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
display:flex;

    }
    .left{
        background:red;

        width:300px;
        height:100px;

    }
    .right{
        background:yellow;

        width:300px;
        height:100px;

    }
    .center{
        flex:1;
        background: blue;       
        height:100px;

    }

</style>

</head>
<body>

<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

</div>

</body>
</html>

5通过网格实现三栏布局

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
display:grid;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;

    }
    .left{
        background:red;

    }
    .right{
        background:yellow;

    }
    .center{

        background: blue;       

    }

</style>

</head>
<body>

<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

</div>

</body>
</html>