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

查看全文

相关阅读:
C# DictionaryHelper
C# Autofac 的 BeanFactory
正则替换
 java页面表格导出为Excel实现
 CentOS 7 下安装Nginx
认识Java 虚拟机的架构
 06 查看网卡实时流量
 05 找出占用CPU、内存过高的进程
 04 一键查看服务器资源利用率
 03 批量创建100个用户并设置随机密码

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