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

Posted 姜小七的填坑之旅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两列布局(一列定宽,一列自适应)相关的知识,希望对你有一定的参考价值。

用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>

 

以上是关于两列布局(一列定宽,一列自适应)的主要内容,如果未能解决你的问题,请参考以下文章

两列自适应布局

CSS布局 , 单列宽度固定,另一列自适应。

两列布局中单列定宽单列自适应布局的5种思路

两列布局

常见的布局实现,如弹性布局,两列、三列布局

双飞翼布局和圣杯布局解析