两列布局(一列定宽,一列自适应,列等高)

2018-07-03 01:24:58来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

结构:

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     }

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信自定义分享链接含有汉字分享失败

下一篇:HTML5--应用网页模板