zoukankan html css js c++ java

收集的css布局

 1 <title>左定宽，右自动</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .box .left,.box .right{
 5     height:200px;line-height: 200px;text-align: center;
 6 }
 7 .box .left{
 8     float:left;width:200px;background-color:red;
 9 }
10 .box .right{
11     margin-left:210px;background-color: blue;
12 }
13 </style>
14 <body>
15     <div class="box">
16         <div class="left">左</div>
17         <div class="right">右</div>
18     </div>
19 </body>

 1 <title>左定宽，右自动(position+margin)</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .box .left,.box .right{
 5     height:200px;line-height: 200px;text-align: center;
 6 }
 7 .box .left{
 8     position: absolute;width:200px;background-color:red;
 9 }
10 .box .right{
11     margin-left:210px;background-color: yellow;
12 }
13 </style>
14 <body>
15     <div class="box">
16         <div class="left">左</div>
17         <div class="right">右</div>
18     </div>
19 </body>

 1 <title>（两侧定宽，中间自适应）</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .center,.left,.right{
 5     height:200px;line-height: 200px;text-align:center;
 6 }
 7 .left{
 8     float:left;width:200px;background-color:red;
 9 }
10 .right{
11     float:right;width:200px;background-color:yellow;
12 }
13 .center{
14     margin:0px 210px;background-color:blue;
15 }
16 </style>
17 <body>
18         <div class="left">左</div>
19         <div class="right">右</div>
20         <div class="center">中</div>
21 </body>

 1 <title>（两侧定宽，中间自适应）</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .center,.left,.right{
 5     height:200px;line-height: 200px;text-align:center;
 6 }
 7 .left{
 8     position:absolute;top:0px;left:0px;width:200px;background-color:red;
 9 }
10 .right{
11     position:absolute;top:0px;right:0px;width:200px;background-color:yellow;
12 }
13 .center{
14     margin:0px 210px;background-color:blue;
15 }
16 </style>
17 <body>
18         <div class="left">左</div>
19         <div class="right">右</div>
20         <div class="center">中</div>
21 </body

查看全文

相关阅读:
3d max 动作Take 001改名
 Lua代码规范
 Unity Editor 下创建Lua和Text文件
 Unity 5 Stats窗口
 Unity与安卓开发的一些路径知识
 Unity Remote 无法连接
 常见胸肌问题解答（五）：下缘不够清晰
 常见胸肌问题解答（四）：胸肌块形不够宽
 杠铃卧推：平板、上斜、下斜杠铃卧推动作图解教程
 常见胸肌问题解答（二）：上胸不够发达

原文地址：https://www.cnblogs.com/mingwaer/p/3643387.html