CSS常见三栏布局方法

一、定位布局

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;
}
复制代码

二、浮动布局

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;
}
复制代码

三、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;
}
复制代码

四、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;
}
复制代码

总结

除了以上四种，还有双飞燕、圣杯布局。大家还有什么其他的方法嘛

本文中同步发布在微信公众号【前端开发小白】