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 }
  • 相关阅读:
    js判断是否是合法的端口号
    解决tomcat中文乱码
    使用java代码删除nexus maven仓库中的jar包、pom.xml等组件
    基于 Kubernetes 构建企业 Jenkins 持续集成平台
    minio部署
    elaticsearch 部署
    skywalking 8.0 配置文件
    使用node local dns来提升ClusterDNS服务质量
    kubernetes之监控Operator部署Prometheus
    夜莺监控+prometheus 架构图
  • 原文地址:https://www.cnblogs.com/qiudeqing/p/3495076.html
Copyright © 2011-2022 走看看