zoukankan      html  css  js  c++  java
  • [css layout][08] three fixedcolumns

    1.float向左#wrapper宽度900px

     1 #container {
     2   width: 900px;
     3 }
     4 #wrapper {
     5   width: 900px;
     6   float: left;
     7 }
     8 #content {
     9   margin: 0 200px;
    10 }
    11 #navigation {
    12   width: 200px;
    13   float: left;
    14   margin-left: -200px;
    15 }
    16 #extra {
    17   width: 200px;
    18   float: left;
    19   margin-left: -900px;
    20 }
    21 #footer {
    22   clear: both;
    23 }

    2.float向右#wrapper宽度900px

     1 #container {
     2   width: 900px;
     3 }
     4 #wrapper {
     5   width: 900px;
     6   float: right;
     7 }
     8 #content {
     9   margin: 0 200px;
    10 }
    11 #navigation {
    12   width: 200px;
    13   float: right;
    14   margin-right: -900px;
    15 }
    16 #extra {
    17   width: 200px;
    18   float: right;
    19   margin-right: -200px;
    20 }
    21 #footer {
    22   clear: both;
    23 }

    3.float向右#wrapper宽度500px

     1 #container {
     2   width: 900px;
     3 }
     4 #wrapper {
     5   width: 500px;
     6   float: right;
     7   margin-left: -200px;
     8   position: relative;
     9   left: -200px;
    10 }
    11 #navigation {
    12   width: 200px;
    13   float: right;
    14   margin-right: -300px;
    15 }
    16 #extra {
    17   width: 200px;
    18   float: right;
    19   margin-left: -400px;
    20   position: relative;
    21   left: -400px;
    22 }
    23 #footer {
    24   clear: both;
    25 }

    4.float全部向左#wrapper宽度500px

     1 #container {
     2   width: 900px;
     3 }
     4 #wrapper {
     5   width: 500px;
     6   float: left;
     7   margin-right: -200px;
     8   position: relative;
     9   left: 200px;
    10 }
    11 #navigation {
    12   width: 200px;
    13   float: left;
    14   margin-right: -400px;
    15   position: relative;
    16   left: 400px;
    17 }
    18 #extra {
    19   width: 200px;
    20   float: left;
    21   margin-left: -300px;
    22 }
    23 #footer {
    24   clear: both;
    25 }
  • 相关阅读:
    Redis学习笔记
    sysctl命令修改内核参数
    Spring Boot学习笔记
    抽象和接口
    FTP主动模式与被动模式
    JVM参数调优
    JVM性能调优工具
    性能调优工具
    Feign Hystrix Tomcat参数配置
    Zuul学习笔记
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3422358.html
Copyright © 2011-2022 走看看