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

     <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    .container{
          display: flex;
        }
        .left{
          flex:0 0 200px;
          order: -1;
          background-color: #ccc;
          height: 50px;
        }
        .right{
          flex:0 0 200px;
          background-color: #333;
          height: 50px;
        }
        .center{
          flex:1;
          background-color: #369;
          height: 50px;
        }

     以上为圣杯布局

    <div class="container">
    		<div class="wrap item">
    			<div class="center">center</div>
    		</div>
    		<div class="item left">left</div>
    		<div class="item right">right</div>
    </div>
    .item {
    			float: left;
    		}
    
    		.center {
    			margin: 0 200px;
    			height: 200px;
    			background-color: #ccc;
    		}
    
    		.left {
    			 200px;
    			height: 200px;
    			background-color: red;
    			margin-left: -100%;
    		}
    
    		.right {
    			 200px;
    			height: 200px;
    			background-color: blue;
    			margin-left: -200px;
    		}
    		.wrap {
    			 100%;
    		}
    

      以上为双飞翼布局

  • 相关阅读:
    Guava的学习2
    Guava的学习1
    数据结构
    二叉搜索树的第k个结点
    滑动窗口的最大值
    僵尸进程和孤儿进程
    fork和vfork,exec
    扑克牌顺子
    字符流中第一个不重复的字符
    表示数值的字符串
  • 原文地址:https://www.cnblogs.com/crazy-rock/p/14223111.html
Copyright © 2011-2022 走看看