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


  • 相关阅读:
    决策树
    性能测试–性能监视器
    MEAN栈开发
    Android Studio 入门(转)
    提取重复代码不应该只从代码角度,可以从业务角度看看(转)
    我眼中的领域驱动设计(转)
    网格最短路径算法(Dijkstra & Fast Marching)(转)
    Android GridView显示SD卡的图片
    Android GridView异步加载图片和加载大量图片时出现Out Of Memory问题
    Android 弹出框Dialog并缩放图片
  • 原文地址:https://www.cnblogs.com/mingwaer/p/3643387.html
Copyright © 2011-2022 走看看