zoukankan      html  css  js  c++  java
  • [css layout][11] three fixed columns

    1.全部float向左。#wrapper宽度900px

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

    2.float向右。#wrapper宽度900px

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

    3.float向右,#wrapper宽度500px

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

    4.float向左,#wrapper宽度500px

     1 #container {
     2   width: 900px;
     3   margin: 0 auto;
     4 }
     5 #wrapper {
     6   width: 500px;
     7   float: left;
     8   margin-right: -400px;
     9   position: relative;
    10   left: 400px;
    11 }
    12 #navigation {
    13   width: 200px;
    14   float: left;
    15   margin-left: -100px;
    16 }
    17 #extra {
    18   width: 200px;
    19   float: left;
    20 }
    21 #footer {
    22   clear: both;
    23 }
  • 相关阅读:
    ACM-ICPC 2018 徐州赛区网络预赛 J. Maze Designer (最大生成树+LCA)
    ACM-ICPC 2018 沈阳赛区网络预赛 F. Fantastic Graph (上下界网络流)
    ACM-ICPC 2018 沈阳赛区网络预赛 G. Spare Tire (容斥原理)
    HDU 3081 Marriage Match II (二分+并查集+最大流)
    ISAP模板
    POJ
    青春
    登高有感
    那年今日
    NOIP200101数的计算
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3423903.html
Copyright © 2011-2022 走看看