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

查看全文

相关阅读:
程序员必备工具之Cmder
Markdown简明教程
 几种黑灰名词解释
 windows下 mysql启动错误1067进程意外终止
 Mac OS 安装redis
java里的这些
 maven 两条命令建立 web项目
 判断StringBuilder是否为空
 map与list的交集、补集操作
 关于创业

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