CSS自适应布局

CSS自适应布局可以说是前端程序员必会的一项，本篇文章主要介绍作者在开发中常用的自适应布局方法。

一、左边宽度固定，右边宽度自适应

首先HTML：

 

1 <div class="wrap">
2         <div class="left">固定宽度200px</div>
3         <div class="right">自适应宽度</div>
4  </div>

 

1.left 设置float：left

 

 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 body,html{
 6     height: 100%;
 7     width: 100%;
 8 }
 9 
10 .wrap{
11     width: 100%;
12     height: 100%;
13 }
14 .left{
15     float: left;  // 这里
16     width: 200px;
17     height: 100%;
18     background-color: green;
19 }
20 .right{
21     width: 100%;
22     height: 100%;
23     background-color: blue;
24 }

 

2.自适应元素的calc()

cale()会根据传入的值自动计算。

 

 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 body,html{
 6     height: 100%;
 7     width: 100%;
 8 }
 9 
10 .wrap{
11     width: 100%;
12     height: 100%;
13 }
14 .left{
15     float: left;
16     width: 200px;
17     height: 100%;
18     background-color: green;
19 }
20 .right{
21     float: left;
22     width: calc(100% - 200px); // 这里
23     height: 100%;
24     background-color: blue;
25 }

 

 

 

 

3.父元素display：table

父容器采用display: table和table-layout: fixed时，子容器会平分父容器的宽度，这时候固定某列的width，其余的列会继续平分剩下的宽度。

 

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 body,
 7 html {
 8     height: 100%;
 9     width: 100%;
10 }
11 
12 .wrap {
13     display: table;  // 1
14     width: 100%;
15     height: 100%;
16     table-layout: fixed; // 2
17 }
18 
19 .left {
20     display: table-cell; // 3
21     width: 200px;
22     height: 100%;
23     background-color: green;
24 }
25 
26 .right {
27     display: table-cell; // 4
28     width: 100%; // 5
29     height: 100%;
30     background-color: blue;
31 }

 

 

 

 4.父元素display：flex

 

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 body,
 7 html {
 8     height: 100%;
 9     width: 100%;
10 }
11 
12 .wrap {
13     display: flex; // 1
14     width: 100%;
15     height: 100%;
16 }
17 
18 .left {
19     width: 200px;
20     height: 100%;
21     background-color: green;
22 }
23 
24 .right {
25     flex: 1;  // 2
26     height: 100%;
27     background-color: blue;
28 }

 

posted @ 2020-08-21 14:27  FuloliyaLansfroya  阅读(313)  评论(0)    收藏  举报