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>

查看全文

相关阅读:
错误、异常与自定义异常
 关于使用第三方库、代码复用的一些思考
 [Scheme]一个Scheme的Metacircular evaluator
[Scheme]Understanding the Yin-Yang Puzzle
[Lua]50行代码的解释器，用来演示lambda calculus
将jar包安装到本地仓库
 PowerDesigner安装教程（含下载+汉化+破解）
Jmeter如何录制APP客户端脚本
 jdk1.8 stream 求和
 VMware的快照和克隆总结

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