zoukankan      html  css  js  c++  java
  • CSS总结(七)——常见的两栏、三栏布局

    一、两栏布局 — 左栏固定宽度,右栏宽度自适应
     
         1、 左浮动+margin
               <div class=“left”></div>
               <div class=“main”></div>
           css:  .left{200px;float:left;}
                   .main{margin-left:200px;}
    ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决
     
           2、  绝对定位 + margin-left (兼容性好)
              <div class=“parent">
                <div class=“left”></div>
                <div class=“main”></div>
              </div>
           css: .parent{position:relative;}
                   .left{position:absolute;200px;}
                   .main{margin-left:200px;}
     
          3、  左浮动 + 负margin
              <div class=“main-box">
                <div class=“main”></div>
              </div>
              <div class=“left”></div>
            css:  .main-box {float:left;100%;}
                     .main {margin-left:210px;}
                     .left{float:left;200px;margin-left:-100%;}
     
    二、 三栏布局 
     
      1、 绝对定位法(左右两栏绝对定位,中间栏自适应)
           <body>
            <div id = “left”></div>
            <div id = “main”></div>
            <div id = “right”></div>
          </boby>
    css :      html,body{margin:0;height:100%;}
                 #left,#right{position:absolute;top:0;200px;height:100%;}
                 #left{left:0;}
                 #right{right:0;}
                 #main{margin:0  210px;height:100%;} 
     
     2、  margin负值法
          <body>
            <div id = “main”>
               <div id = “body”></div>
         </div>
            <div id = “left”></div>
            <div id = “right”></div>
          </boby>
       css:   html,body{margin:0;height:100%;}
                #main{100%;height:100%;float:left;}
                #main,#body{margin:0  210px; height:100%;}
                #left;#right{200px;height:100%;float:left;}
                #left{margin-left:-100%;}
                #right{margin-right:-200px;}
     
     3、  自身浮动法(左栏左浮动,右栏右浮动,主体放后面)     
         <body>
            <div id = “left”></div>
            <div id = “right”></div>
            <div id = “main”></div>
          </boby>
      css:   html,body{margin:0;height:100%;}
                 #main {height:100%;margin:0 210px;}
                 #left,#right {200px;height:100%;}
                 #left{float:left;}
                 #right{float:right;}
  • 相关阅读:
    网上购物瘾,你怎么能退出?
    POJ 1006 Biorhythms 中国的法律来解决剩余的正式
    【Android接口实现】PhotoView——单点支持/多图像缩放,实现了触摸
    线程同步synchronized
    阿里云CentOS 6.5 设备、执行Docker容器和步骤的方法
    打破了中国电信华为无线路由猫(HG522-C)自己主动拨号+任意数量的计算机+iTV
    GCC 命令行具体解释
    Nginx 负载均衡
    Linux pipe功能
    Java有用的经验--Swing片
  • 原文地址:https://www.cnblogs.com/emory/p/5302980.html
Copyright © 2011-2022 走看看