[分享]css两栏3栏布局

CSS布局是Web页面设计中非常重要的一部分，其中两栏布局、三栏布局是常用的布局之一，能够满足大多数Web页面的设计需求。对于两栏布局，一栏通常用于显示内容，另一栏则用于放置侧边栏，导航等信息。实现此...

CSS布局是Web页面设计中非常重要的一部分，其中两栏布局、三栏布局是常用的布局之一，能够满足大多数Web页面的设计需求。

对于两栏布局，一栏通常用于显示内容，另一栏则用于放置侧边栏，导航等信息。实现此布局可以使用float或者flexbox属性。

.container {
    width: 100%;
    overflow: hidden;
}
.content {
    width: 70%;
    float: left;
    box-sizing: border-box;
}
.sidebar {
    width: 30%;
    float: left;
    box-sizing: border-box;
} 

对于三栏布局，中间栏通常用于显示内容，左右两栏用于放置侧边栏，导航等信息。实现此布局可以使用float或者flexbox属性。其中，利用float布局实现三栏布局，需要同时设置浮动和宽度。

.container {
    width: 100%;
    overflow: hidden;
}
.left {
    width: 20%;
    float: left;
    box-sizing: border-box;
}
.right {
    width: 20%;
    float: right;
    box-sizing: border-box;
}
.center {
    width: 60%;
    overflow: hidden;
    box-sizing: border-box;
} 

除了float布局，使用flexbox属性也可以实现两栏布局、三栏布局，且代码更加简洁。

.container {
    display: flex;
    flex-direction: row;
}
.content {
    flex: 1;
}
.sidebar {
    width: 300px;
}
.left {
    width: 300px;
}
.right {
    width: 300px;
}
.center {
    flex: 1;
} 

综上所述，无论使用float布局还是flexbox属性，两栏布局、三栏布局都是非常好用且常用的CSS布局方式。