[分享]css两栏三栏自适应

在网站开发中，常常需要将一个页面划分成多个区域，实现栏列布局。而在栏列布局中，两栏三栏布局是最为常见的。CSS实现两栏三栏自适应布局常用的方式有两种：浮动布局和flex布局。下面我们分别介绍一下。/浮...

在网站开发中，常常需要将一个页面划分成多个区域，实现栏列布局。而在栏列布局中，两栏三栏布局是最为常见的。

CSS实现两栏三栏自适应布局常用的方式有两种：浮动布局和flex布局。下面我们分别介绍一下。

/*浮动布局*/

.container {
    width: 100%; /* 宽度自适应 */
    margin: 0 auto; /* 盒子居中 */
}
.left {
    width: 200px; /* 左侧栏宽度 */
    float: left; /* 左浮动 */
}
.right {
    width: calc(100% - 200px); /* 右侧栏宽度 */
    float: left; /* 左浮动 */
}

/*三栏布局*/

.container {
    display: flex; /* 容器改为flex布局 */
    justify-content: space-between; /* 等距分布 */
}
.left {
    width: 200px; /* 左侧栏宽度 */
}
.middle {
    flex: 1; /* 中间栏占满剩余空间 */
}
.right {
    width: 200px; /* 右侧栏宽度 */
} 

以上是两种实现方式的代码示例。其中浮动布局采用左侧栏左浮动，右侧栏使用宽度自适应，同时使用calc函数计算出右侧栏的宽度，从而达到两栏自适应的效果。

而flex布局采用容器的display属性设置为flex，再通过justify-content属性实现栏列的等距分布。其中中间栏使用flex属性占满了剩余的空间，从而实现了三栏自适应的效果。

综上所述，对于两栏三栏布局的自适应实现，我们可以采用浮动布局或flex布局两种方式。具体采用哪种方式，需要根据实际的布局需求来决定。