zoukankan      html  css  js  c++  java
  • 三栏布局 两栏布局

    参考学习:https://www.cnblogs.com/imwtr/p/4441741.html
    https://www.cnblogs.com/woodk/p/5147085.html
    https://blog.csdn.net/wangchengiii/article/details/77926868
    双飞翼布局:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.header{
    			height: 20px;
    			background-color: blue;
    		}
    		.main,.left,.right{
    			float: left;
    			height: 200px;
    		}
    		.main{
    			 100%;
    			background-color: red;
    		}
    		.main .mainner{
    			margin :0 100px 0 200px;
    
    		}
    		.left{
    			 200px;
    			background-color: green;
    			margin-left: -100%;
    		}
    		.right{
    			 100px;
    			background-color: yellow;
    			margin-left: -100px;
    
    		}
    		.null{
    			clear: both;
    		}
    		.footer{
    			height: 20px;
    			background-color: blue;
    		}
    
    
    	</style>
    </head>
    <body>
      <div class="header"></div>
      <div class="main">
      	<div class="mainner">1</div>
      </div>
      <div class="left">1</div>
      <div class="right">1</div>
      <div class="null"></div>
      <div class="footer"></div>
    </body>
    <script>
    
    </script>
    </html>
    

    圣杯布局:

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	.header{
    		height: 20px;
    		background-color: blue;
    	}
    	.middle,.left,.right{
    		float: left;
    		position: relative;
    		height: 200px;
    	}
    	.main{
    		padding:0 100px 0 200px;
    		overflow: hidden;	
    	}
    	.middle{
    		 100%;
    		background-color: red;
    	}
    	.left{
    		 200px;
    		background-color: green;
    		margin-left:-100%;
    		left: -200px;
    	}
    	.right{
    		 100px;
    		background-color: yellow;
    		margin-left: -100px;
    		right: -100px;
    	}
    	.footer{
    		height: 20px;
    		background-color: blue;
    	}
    
    	</style>
    </head>
    <body>
    	<div class="header"></div>
    	<div class="main">
    		<div class="middle">1</div>
    		<div class="left">1</div>
    		<div class="right">1</div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    

    双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了。
    两栏布局
    1.要点:将侧边区块域浮动,浮动后覆盖红色, 再将 overflow:auto,形成BFC,形成独立区域,达到效果。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    .header{
    	height: 50px;
    	background-color: green;
    }
    .main .left{
    	 100px;
    	height: 200px;
    	background-color: yellow;
    	float:left;
    }
    .main .right{
    	height: 200px;
    	background-color: red;
    	overflow: hidden;
    }
    
    .footer{
    	height: 50px;
    	background-color: green;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
    <div class="footer"></div>
    </body>
    </html>
    
    

    html结构

       <div class="outer">
            <div class="left">固定宽度</div>
            <div class="right">自适应宽度</div>
        </div>
    

    方法1:左侧div设置成浮动:float: left,右侧div宽度会自拉升适应

    .outer {
         100%;
        height: 500px;
        background-color: yellow;
    }
    .left {
         200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .right {
        height: 200px;
        background-color: blue;
    }
    

    方法2:对右侧:div进行绝对定位,然后再设置right=0,即可以实现宽度自适应

    .outer {
         100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }
    .left {
         200px;
        height: 200px;
        background-color: red;
    }
    .right {
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 200px;
        top:0;          
        right: 0;
    }
    

    方法3:将左侧div进行绝对定位,然后右侧div设置margin-left: 200px

    .outer {
         100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }
    .left {
         200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
    .right {
        height: 200px;
        background-color: blue;
        margin-left: 200px;
    }
    

    方法4:使用flex布局

    .outer {
         100%;
        height: 500px;
        background-color: yellow;
        display: flex;
        flex-direction: row;
    }
    .left {
         200px;
        height: 200px;
        background-color: red;
    }
    .right {
        height: 200px;
        background-color: blue;
        flex: 1;
    }
    
  • 相关阅读:
    bzoj1015星球大战(并查集+离线)
    bzoj1085骑士精神(搜索)
    bzoj1051受欢迎的牛(Tarjan)
    左偏树学习
    hdu1512 Monkey King(并查集,左偏堆)
    左偏树(模板)
    PAT (Basic Level) Practice (中文) 1079 延迟的回文数 (20分) (大数加法)
    PAT (Basic Level) Practice (中文) 1078 字符串压缩与解压 (20分) (字符转数字——栈存放)
    PAT (Basic Level) Practice (中文) 1077 互评成绩计算 (20分) (四舍五入保留整数)
    PAT (Basic Level) Practice (中文) 1076 Wifi密码 (15分)
  • 原文地址:https://www.cnblogs.com/princeness/p/11664990.html
Copyright © 2011-2022 走看看