一侧宽度固定，一侧自适应的布局

方法一：用flex布局

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9         .parent {
10             height: 500px;
11             border: 1px solid #222;
13             display: flex;
14         }
15         
16         .left {
17             width: 200px;
18             border: 1px solid #ccc;
19             margin: 20px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin: 20px;
25             flex: 1;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

 

 

 

方法二：用浮动布局

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9         .parent {
10             height: 500px;
11             border: 1px solid #222;
12         }
13         
14         .left {
15             float: left;
16             width: 200px;
17             border: 1px solid #ccc;
18             margin: 20px;
19             height: 200px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin: 20px;
25             height: 200px;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

方法三:通过绝对定位

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9        .parent {
10             height: 500px;
11             border: 1px solid #222;
12         }
13         
14         .left {
15             position: absolute;
16             width: 200px;
17             border: 1px solid #ccc;
18             /*margin: 20px;*/
19             height: 200px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin-left:200px;
25             height: 200px;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

 

posted @ 2019-06-21 16:27  无忧lv  阅读(378)  评论(0)  编辑  收藏  举报