你的位置:首页 > 网页设计

[网页设计]两列布局(一列定宽,一列自适应,列等高)


结构:

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   }