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

    经典布局案例


    双飞翼布局

    一般用于三栏布局,左右两栏相等,等比例缩放

    <style>
    	body{margin:0px;}
    	.container{ 100%;overflow:hidden;}
    	.container div{float: left; min-height: 200px;margin-bottom:-9999px;
    		padding-bottom:9999px;}
    	.container .main{ 100%; }
    	.container .main div{margin: 0 120px;background: #ccc;float: none;margin-bottom: -9999px;}
    	.container .left{ 100px; margin-left:-100% ;background: red;}
    	.container .right{ 100px;margin-left:-100px;background-color: blue;}
    </style>
    <body>
    	<div class="container">
    		<div class="main">
    			<div>
    				中间
    			</div>
    		</div>
    		<div class="left">左边</div>
    		<div class="right">右边</div>
    	</div>
    </body>
    

    圣杯布局

    一般用于三栏布局,左右不相等,中间等比例缩放

    <style>
    	body{margin: 0px;}
    	.container{padding: 0 200px 0 100px;}
    	.container div{float: left;height: 400px;position: relative;}
    	.container .main{ 100%;background: #ccc;}
    	.container .left{ 100px;left: -100px;margin-left: -100%;background-color: red;}
    	.container .right{ 200px; left: 200px; margin-left: -200px;background: blue;}
    </style>
    <body>
    	<div class="container">
    		<div class="main">中间</div>
    		<div class="left">左边</div>
    		<div class="right">右边</div>
    	</div>
    </body>
    
  • 相关阅读:
    AC自动机模板2(【CJOJ1435】)
    AC自动机模板1(【洛谷3808】)
    【HDU 2063】过山车(二分图最大匹配模板题)
    矩阵快速幂
    Trie树
    AC自动机
    高斯消元法
    KMP算法 Next数组详解
    端口映射
    最全面的HashMap和HashTable的区别
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12422269.html
Copyright © 2011-2022 走看看