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;
    }
    
  • 相关阅读:
    UNIX网络编程——Socket通信原理和实践
    UNIX环境高级编程——单实例的守护进程
    UNIX环境高级编程——初始化一个守护进程
    UNIX环境高级编程——创建孤儿进程
    UNIX环境高级编程——实现uid to name
    CentOS7中使用yum安装Nginx的方法
    centos7配置IP地址
    关于Dubbo的原理以及详细配置
    关于Java大数操作(BigInteger、BigDecimal)
    关于JSON 与 对象 、集合之间的转换
  • 原文地址:https://www.cnblogs.com/princeness/p/11664990.html
Copyright © 2011-2022 走看看