码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-17 11:55:26      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

用table+table-cell实现两列布局(一列定宽,一列自适应,且table是自动的两列自动登高)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     .parent {
 8         background-color: grey;
 9         width: 500px;
10         height: 300px;
11         padding: 10px;
12         box-sizing: border-box;
13 
14         display: table;
15         table-layout: fixed;//加速table的渲染,实现布局优先
16     }
17     .left {
18         width: 100px;
19         display: table-cell;
20         background-color: skyblue;
21         border-right: 10px solid transparent;
22         background-clip: padding-box;//设置背景的显示位置
23     }
24     .right {
25         display: table-cell;
26         background-color: greenyellow;
27     }
28     </style>
29 </head>
30 <body>
31     <div class="parent">
32         <div class="left"></div>
33         <div class="right"></div>
34     </div>
35 </body>
36 </html>

 

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

标签:

原文地址:http://www.cnblogs.com/Janejxt/p/5878060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!