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

    1。作者还是全部float向左

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

    2.全部float向右

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

    3.#wrapper宽度50%全部向右浮动

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

    4.#wrapper宽度50%向左浮动

     1 #wrapper {
     2   width: 50%;
     3   float: left;
     4   margin-right: -50%;
     5   position: relative;
     6   left: 50%;
     7 }
     8 #navigation {
     9   width: 25%;
    10   float: left;
    11 }
    12 #extra {
    13   width: 25%;
    14   float: left;
    15 }
    16 #footer {
    17   clear: both;
    18 }
  • 相关阅读:
    字符流中第一个不重复的字符 python实现
    当当网爬虫
    第六周---事后分析
    第四周的菜鸡互啄
    菜鸡互啄队——软件需求规格说明书
    菜鸡互啄队—— 团队合作
    Hadoop综合大作业
    分布式文件系统HDFS 练习
    安装Hadoop
    爬取全部的校园新闻
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3417569.html
Copyright © 2011-2022 走看看