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}{3903}{Stock Exchange}{nlogn 最长上升子序列}
    {HDU}{2516}{取石子游戏}{斐波那契博弈}
    {POJ}{3925}{Minimal Ratio Tree}{最小生成树}
    {ICIP2014}{收录论文列表}
    {Reship}{KMP字符串匹配}
    kettle系列-[KettleUtil]kettle插件,类似kettle的自定义java类控件
    kettle系列-kettle管理平台部署说明
    kettle系列-我的开源kettle调度、管理平台[kettle-manager]介绍
    技术杂记-改造具有监控功能的数据库连接池阿里Druid,支持simple-jndi,kettle
    技术杂记-日期时间字符串解析识别
  • 原文地址:https://www.cnblogs.com/emory/p/5302980.html
Copyright © 2011-2022 走看看