zoukankan      html  css  js  c++  java
  • [css layout][03] three percentage columns

    1.作者方法

    1 div#wrapper{float:left;width:100%}
    2 div#content{margin-right: 50%}
    3 div#navigation{float:left;width:25%;margin-left:-50%}
    4 div#extra{float:left;width:25%;margin-left:-25%}
    5 div#footer{clear:left;width:100%}

    2.这个貌似很简单

     1 #wrapper {
     2   width: 50%;
     3   float: left;
     4 }
     5 #navigation {
     6   width: 25%;
     7   float: left;
     8 }
     9 #extra {
    10   width: 25%;
    11   float:left;
    12 }
    13 #footer {
    14   clear: both;
    15 }

    3.全部float向右,再用position和负边距弄过来,没事找事了

     1 #wrapper {
     2   width: 50%;
     3   float: right;
     4   margin-left: -50%;
     5   position: relative;
     6   left: -50%;
     7 }
     8 #navigation {
     9   width: 25%;
    10   float: right;
    11   margin-left: -25%;
    12   position: relative;
    13   left: -25%;
    14 }
    15 #extra {
    16   width: 25%;
    17   float:right;
    18 }
    19 #footer {
    20   clear: both;
    21 }

    4.模仿作者方法,但是float向右,注意需要移动的具体位置

     1 #wrapper {
     2   width: 100%;
     3   float: right;
     4 }
     5 #content {
     6   margin-right: 50%;
     7 }
     8 #navigation {
     9   width: 25%;
    10   float: right;
    11   margin-right: -75%;
    12 }
    13 #extra {
    14   width: 25%;
    15   float:right;
    16   margin-right: -100%;
    17 }
    18 #footer {
    19   clear: both;
    20 }

    其他的乱七八糟的了。

  • 相关阅读:
    EcFinal游记
    简要介绍补码的原理
    【SCOI2007】降雨量
    【ecfinal2019热身赛】B题
    【HAOI2011】problem a
    20200301(ABC)题解 by李旭晨
    20200228(ABC)题解 by 马鸿儒
    20200220(C)题解 b刘存
    20200225(DEF)题解 by 马鸿儒
    20200224(ABC)题解 by 马鸿儒
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3416272.html
Copyright © 2011-2022 走看看