zoukankan html css js c++ java

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

方法一：用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>

查看全文

相关阅读:
Google Map API基本概念（转载）很好的例子
 Sql Exception Handling & Throw Exception
幸福人生讲座（十）：五伦中哪一伦最重要？
Delete Database Log
杨澜语录
 余世雄如何提升职场“执行力”
红楼女梦
 假如我真的看透了
 余世维有效沟通
 习惯修养

原文地址：https://www.cnblogs.com/lvlvlv/p/11065368.html