zoukankan      html  css  js  c++  java
  • [css layout][16]Liquid, secondary columns fixed-width

    1. 全部float向左
       1 #wrapper {
       2   float: left;
       3   width:100%;
       4 }
       5 #content {
       6   margin-right: 400px;
       7 }
       8 #navigation {
       9   width: 200px;
      10   float: left;
      11   margin-left: -200px;
      12 }
      13 #extra {
      14   width: 200px;
      15   float: left;
      16   margin-left: -400px;
      17 }
      18 #footer {
      19   clear: both;
      20 }
    2. left,left, right
       1 #wrapper {
       2   float: left;
       3   width:100%;
       4 }
       5 #content {
       6   margin-right: 400px;
       7 }
       8 #navigation {
       9   width: 200px;
      10   float: left;
      11   margin-left: -200px;
      12 }
      13 #extra {
      14   width: 200px;
      15   float: right;
      16   margin-left: -100%;
      17   position: relative;
      18   left: -200px;
      19 }
      20 #footer {
      21   clear: both;
      22 }
    3. left, right, left
       1 #wrapper {
       2   float: left;
       3   width:100%;
       4 }
       5 #content {
       6   margin-right: 400px;
       7 }
       8 #navigation {
       9   width: 200px;
      10   float: right;
      11   margin-left: -100%;
      12 }
      13 #extra {
      14   width: 200px;
      15   float: left;
      16   margin-left: -400px;
      17 
      18 }
      19 #footer {
      20   clear: both;
      21 }
    4. left, right, right
       1 #wrapper {
       2   float: left;
       3   width:100%;
       4 }
       5 #content {
       6   margin-right: 400px;
       7 }
       8 #navigation {
       9   width: 200px;
      10   float: right;
      11 }
      12 #extra {
      13   width: 200px;
      14   float: right;
      15 
      16 }
      17 #footer {
      18   clear: both;
      19 }
    5. right, right,right
       1 #wrapper {
       2   float: right;
       3   width:100%;
       4 }
       5 #content {
       6   margin-right: 400px;
       7 }
       8 #navigation {
       9   width: 200px;
      10   float: right;
      11   margin-right: -100%;
      12 }
      13 #extra {
      14   width: 200px;
      15   float: right;
      16   margin-right: -100%;
      17   position: relative;
      18   right: 200px;
      19 }
      20 #footer {
      21   clear: both;
      22 }
  • 相关阅读:
    三、Python基础(5)
    三、Python基础(4)
    三、Python基础(3)
    三、Python基础(2)
    mysql 索引的使用
    Java 泛型T
    vueJS
    集群 分布式 负载均衡的区别
    nodeJS vue elementUI mock学习过程笔记,仅用于个人记录巩固
    MAP
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3495076.html
Copyright © 2011-2022 走看看