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

    1.#wrapper宽度100%全部float向左

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

    2.#wrapper宽度100%全部float向右

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

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

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

    4.#wrapper宽度50%全部float向左

     1 #wrapper {
     2   width: 50%;
     3   float: left;
     4   margin-right: -50%;
     5   position: relative;
     6   left: 50%;
     7 }
     8 #navigation {
     9   float: left;
    10   width: 25%;
    11   margin-right: -25%;
    12   position: relative;
    13   left: 25%;
    14 }
    15 #extra {
    16   float: left;
    17   width: 25%;
    18 }
    19 #footer {
    20   clear: both; 
    21 }
  • 相关阅读:
    模板笔记2
    模板笔记
    qt打包可执行文件
    合并单独的视频和音频
    模板1
    mysql 数据表中查找重复记录
    mysql左连接右连接(查询两张表不同的数据)
    mysql--构造数据、导入导出
    mysql安装
    linux下启动tomcat服务
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3418437.html
Copyright © 2011-2022 走看看