两列布局(一列定宽,一列自适应,列等高)
1<div class="parent">
2 <div class="left">
3 <p>left</p>
4 </div>
5 <div class="right">
6 <p>right</p>
7 <p>right</p>
8 </div>
9 </div>
1.用table+table-cell实现两列布局(一列定宽,一列自适应,且table是自动的两列自动等高)
1 .parent {
2 background-color: grey;
3 width: 500px;
4 height: 300px;
5 padding: 10px;
6 box-sizing: border-box;
7
8 display: table;
9 table-layout: fixed;
10 table-layout: fixed;/*加速table的渲染,实现布局优先*/
11 }
12 .left {
13 display: table-cell;
14 width: 100px;
15
16 background-color: skyblue;
17 border-right: 10px solid transparent;
18 background-clip: padding-box;/*设置背景的显示位置*/
19 }
20 .right {
21 display: table-cell;
22 background-color: greenyellow;
23 }
2 使用flex进行两列布局(一列定宽,一列自适应,列等高),flex的align-item属性默认值是stretch.
1 .parent {
2 background-color: grey;
3 width: 500px;
4 height: 300px;
5 padding: 10px;
6
7 display: flex;
8 }
9 .left {
10 width: 100px;
11 margin-right: 10px;
12 background-color: skyblue;
13 }
14 .right {
15 flex: 1; /* 填充剩余部分 */
16 background-color: greenyellow;
17 }
3.使用float(伪等高)
1 .parent {
2 background-color: grey;
3 width: 500px;
4 height: 300px;
5 padding: 10px;
6
7 overflow: hidden;/*截断*/
8 }
9 .left,.right {
10 padding-bottom: 99999px;
11 margin-bottom: -99999px;
12 }/*等高*/
13 .left {
14 width: 100px;
15 background-color: skyblue;
16 margin-right: 10px;
17 float: left;
18
19 }
20 .right {
21 overflow: hidden;
22 background-color: yellowgreen;
23 }