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;}
  • 相关阅读:
    Linux下VFP NEON浮点编译
    硬浮点 VFP
    程序员如何避免猝死?
    程序员谨防加班猝死之十大建议
    linux系统调用和库函数调用的区别
    彻底抛弃脚本录制,LR脚本之使用web_custom_request函数自定义
    LoadRunner监控mysql利器-SiteScope(转)
    linux mysql 数据库开启外部访问设置指南
    Java Web自定义MVC框架详解 (转)
    Jenkins+Ant+Jmeter搭建持续集成的接口测试平台(转)
  • 原文地址:https://www.cnblogs.com/emory/p/5302980.html
Copyright © 2011-2022 走看看