CSS常見三欄佈局方法

1、定位佈局

html

<div class="demo">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
複製代碼

css

.demo{
    position:relative;
    width:100%;
    height:300px;
}
.left,.right{
    position:absolute;
    top:0;
    width:100px;
    height:300px;
}
.left{
    left:0;
    background:red;
}
.right{
    right:0;
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}
複製代碼

2、浮動佈局

html(center要放在最後)

<div class="demo">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
複製代碼

css

.demo{
    width:100%;
    height:300px;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    float:left;
    background:red;
}
.right{
    float:right;
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}
複製代碼

3、flex佈局

html

<div class="demo">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
複製代碼

css

.demo{
    width:100%;
    height:300px;
    display:flex;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    background:red;
}
.right{
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
    flex:1;
}
複製代碼

4、gird佈局

html

<div class="demo">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
複製代碼

css

.demo{
    width:100%;
    height:300px;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto 100px;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    background:red;
}
.right{
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}
複製代碼

總結

除了以上四種，還有雙飛燕、聖盃佈局。你們還有什麼其餘的方法嘛

本文中同步發佈在微信公衆號【前端開發小白】