zoukankan      html  css  js  c++  java
  • css布局:定宽,自适应

    css三栏布局:1、中自:float,absolute,margin三种方法。2、中固:margin,table两种方法。

    两边定宽,中间自适应:

    float:

    #left{
    		float:left;
    		220px;
    		height:200px;
    		background-color: red;
    	}
    	#right{
    		float:right;
    		220px;
    		height:200px;
    		background-color: red;
    	}
    	#main{
    		margin:0 230px;
    		height:200px;
    		background-color: olive
    	}
    
    <div id='left'>left</div>
    <div id='right'>right</div>
    <div id='main'>mian</div>
    

    absolute:

    html,
    	body{
    		margin:0;
    		padding:0;
    		height:100%;
    	}
    	#left,
    	#right{
    		position:absolute;
    		top:0;
    		220px;
    		height: 100%;
    		background-color: red
    	}
    	#left{
    		left:0;
    	}
    	#right{
    		right:0;
    	}
    	#main{
    		margin:0 230px;
    		height:100%;
    		background-color: olive
    	}
    
    <div id='left'>left</div>
    	<div id='right'>right</div>
    	<div id='main'>mian</div>
    

    前两种方法html中,中间列一定要放在左右两列的后面。

    margin:-px:

    #main{
    		float:left;
    		100%;
    	}
    	#main_con{
    		margin:0 230px;
    		height:220px;
    		background-color: green;
    	}
    	#left{
    		float:left;
    		margin-left:-100%;   /*由main的width决定*/
    		230px;
    	}
    	#right{
    		float:left;
    		margin-left:-230px;  /*自身宽度的负值*/
    		230px;
    	}
    	#left .inner,
    	#right .inner{
    		background-color: orange;
    		margin:0 10px;   /*控制边栏与主内容的间距*/
    		height:220px;
    	}
    
    <div id='main'>
    		<div id='main_con'>main</div>
    	</div>
    	<div id='left'>
    		<div id='left_con' class='inner'>left</div>
    	</div>
    	<div id='right'>
    		<div id='right_con' class='inner'>right</div>
    	</div>
    

    中间定宽,两边自适应:

    方法一:margin:-px

    #main{
    		float:left;
    		540px;		
    		background-color: olive;
    	}
    	#left, #right{
    		margin-left: -271px;
    		float:left;
    		50%;		
    	}	
    	.inner{
    		padding:20px;
    	}
    	#left .inner,
    	#right .inner{
    		margin-left:271px;
    		background-color:orange 
    	}
    
    <div id='left'>
    		<div class='inner'>left</div>
    	</div>
    	<div id='main'>
    		<div class='inner'>main</div>
    	</div>
    	<div id='right'>
    		<div class='inner'>right</div>
    	</div>
    

    方法二:挺简单的。

    .left{
    		background-color: red;
    	}
    	.main{
    		background-color: orange;
    	}
    	.right{
    		background-color: red;
    	}
    
    <table width='100%'>
    		<tr>
    			<td class='left'>左边自适应</td>
    			<td class='main' width='500'>中间固定宽度</td>
    			<td class='right'>右边自适应</td>
    		</tr>
    	</table>
    

      

  • 相关阅读:
    关于javaScript substring()方法的一点点应用
    解决Vue报错:Invalid prop: type check failed for prop "id". Expected Number with value 14, got String with value "14".
    better-scroll滚动无效的查错
    Vue程序化导航---又称编程式导航
    Vue路由初始化Can't read prooerty '$createElement' of undefined
    在前台利用jquery对dom元素进行排序
    js/jquery如何获取获取父窗口的父窗口的元素
    jquery使鼠标滚轮暂时失效
    introJs写法
    用Intro.js创建站点分步指南
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4304877.html
Copyright © 2011-2022 走看看