首页 > > 网页制作 > css >

两列布局（一列定宽，一列自适应，列等高）

2018-06-29 06:39:22来源：博客园阅读 ()

结构：

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     }