zoukankan      html  css  js  c++  java
  • 圣杯布局跟双飞翼布局

    朋友去面试遇到了一道面试题,关于圣杯布局跟双飞翼布局,一直孤陋寡闻,赶紧记录一下。

    顾名思义,这种布局就是左右块固定,中间块随窗口变化。

    圣杯布局:

    <div class="wrap">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    .wrap{
      padding:0 200px 0 300px;  
    }
    .center{
      width:100%;
      position:relative;
      float:left;
      background:#fea331;
    }
    .left{
      position:relative;
      width:300px;
      float:left;
      margin-left:-100%;
      right:300px;
      background:#fed442;
    }
    .right{
      position:relative;
      width:200px;
      float:left;
      background:#fec221;
      margin-right: -300px;
    }

    双飞翼布局:

    <div class="center">
      <div class="inner">inner</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    .center{
      width:100%;
      float:left;  
    }
    .inner{
      margin:0 200px 0 300px;
      background:#fea331;  
    }
    .left{
      width:300px;
      margin-left:-100%;
      float:left;  
      background:#fec251;
    }
    .right{
      width:200px;
      margin-left:-200px;
      float:left;
      background:#fed243;
    }
  • 相关阅读:
    Product of Array Except Self
    Sliding Window Maximum
    First Bad Version
    Perfect Squares
    IPsec Note
    BGP实验第9-10选路原则
    BGP选路第3条原则
    BGP选路原则第1条至第8条
    BGP选路原则笔记 Cyrus
    Lab Block hole of BGP
  • 原文地址:https://www.cnblogs.com/hongyafang/p/8677244.html
Copyright © 2011-2022 走看看