CSS | CSS实现两栏布局（左边定宽 右边自适应，左右成比自适应）

目录

一、左边定宽 右边自适应

1.浮动

2.利用浮动+margin

3.定位+margin

4.flex布局

5.table 布局

二、左右成比自适应

1:1

1flex布局

table布局

1:2

flex布局

---

<div class="father"><div class="left">左边自适应</div><div class="right">右边自适应</div></div>

一、左边定宽 右边自适应

实现效果：

   1.浮动

.left {width: 100px;background-color: rebeccapurple;float: left;
}
.right {width: calc(100%-100px);background-color: green;
}

   2.利用浮动+margin

.left {width: 100px;background-color: rebeccapurple;float: left;
}.right {background-color: green;margin-left: 100px;
}

3.定位+margin

.father {position: relative;
}.left {position: absolute;width: 100px;left: 0;background-color: rebeccapurple;
}.right {background-color: green;margin-left: 100px;
}

4.flex布局

.father {display: flex;
}.left {width: 100px;background-color: rebeccapurple;
}.right {flex: 1;/* flex: 1可以让其填充剩余的空间，以达到拉伸的效果 */background-color: green;
}

5.table 布局

.father {width: 100%;display: table;
}.left {display: table-cell;width:300px;background-color: rebeccapurple;
}.right {display: table-cell;background-color: green;
}

二、左右成比自适应

1:1

1flex布局

.father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;}
.right {width: 200px;height: 200px;background-color: green;flex: 1;/* 放大且缩小并等分所有空间 *//* flex：1等于flex-grow: 1、flex-shrink: 1、flex-basic: 0% */
}

table布局

.father {width: 100%;display: table;
}.left {display: table-cell;height: 200px;background-color: rebeccapurple;
}.right {display: table-cell;height: 200px;background-color: green;
}

1:2

flex布局

.father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;
}
.right {width: 200px;height: 200px;background-color: green;flex: 2;/* flex：1等于flex-grow: 2、flex-shrink: 2、flex-basic: 0% */}

等分所有空间，宽度比左：右=1:2

flex 布局的默认主轴方向为 row ，所以 flex-basis 属性 默认是控制元素的 width