zoukankan      html  css  js  c++  java
  • 解决 多列 布局

    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    
    多列布局
    一列定宽另一列自适应
    (1) float + margin
    兼容性有点问题,IE7以后,没问题
    IE6有问题,有3像素的问题,可以通过hack解决。
    
    
    <style type="text/css">
    	.left {float: left; height:30px;  100px; background-color: #ccc;}
    	.right {margin-left:110px; background-color: #369;}
    </style>
    
    
    (2) float + margin + fix
    优点,兼容性很好,
    缺点,结构多一点。
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right-fix">
    		<div class="right">
    			<p>right</p>
    			<p>right</p>
    		</div>
    	</div>
    </div>
    
    <style type="text/css">
    	.left {
    		float: left; 
    		 100px; 
    		background-color: #999;
    		position: relative;		/*提高层级,否则无法选中其中的元素,因为fix在后面*/
    	}
    	.right-fix {
    		float: right;		
    		100%; 
    		background-color: #ddd;
    		margin-left:-100px; 
    	}
    	.right {
    		margin-left:110px; 
    		background-color: #369;
    	}
    
    </style>
    
    (3)float + overflow
    缺点IE6,不行
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	.left {
    		float: left; 
    		 100px; 
    		margin-right: 20px;
    		background-color: #999;
    	}
    
    	.right {
    		overflow: hidden;	/*触发bfc,bfc模式与外界隔离*/
    		background-color: #ddd;
    	}
    
    </style>
    
    
    
    (4)table
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	.parent {
    		display: table;
    		 100%;
    		table-layout: fixed;	/*两个好处(1)加速table渲染,实现布局优先。*/
    		background-color: #999;
    	}
    
    	.left, .right {
    		display: table-cell;
    		background-color: #eee;
    	}
    
    	.left {
    		 100px;
    		background-color: #369;
    		padding-right: 20px;
    	}
    
    </style>
    
    
    
    (5)flex
    兼容性问题。性能稍微差一点,小范围布局。
    
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	.parent {
    		display: flex;
    	}
    
    	.left {
    		background-color: #369;
    		left: 100px;
    		margin-right: 20px;
    	}
    
    	.right {
    		flex : 1;	/*1 1 0; 剩余宽度都给了右边*/
    		background-color: #eee;
    	}
    
    </style>
    
    
    
    多列定宽,一列自适应
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="center">
    		<p>center</p>
    	</div>	
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    ------------1---------------
    <style type="text/css">
    	.parent {
    		display: flex;
    	}
    
    	.left, .center {
    		background-color: #369;
    		left: 100px;
    		margin-right: 20px;
    	}
    
    	.right {
    		flex : 1;	/*1 1 0; 剩余宽度都给了右边*/
    		background-color: #eee;
    	}
    
    </style>
    
    
    ------------2---------------
    
    <style type="text/css">
    
    	.left, .center {
    		background-color: #369;
    		float: left;
    		 100px;
    		margin-right: 20px;
    	}
    
    	.right {
    		overflow: hidden;
    		background-color: #eee;
    	}
    
    </style>
    
    
    
    多列布局
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    左右自适应
    (1) float + overflow
    
    
    
    <style type="text/css">
    	.left {
    		background-color: #369;
    		float: left;
    		margin-right: 20px;
    	}
    
    	.right {
    		overflow: hidden;
    		background-color: #eee;
    	}
    </style>
    
    
    (2)	table
    
    <style type="text/css">
    
    	.parent {
    		display: table;
    		 100%;
    		table-layout: fixed;
    	}
    
    	.left, .right {
    		display: table-cell;
    	}
    
    	.left {
    		 100px;
    		padding-right: 20px;
    		background-color: #369;
    	}
    	.right {
    		background-color: #eee;
    	}
    
    </style>
    
    (3)flex
    
    <style type="text/css">
    
    	.parent {
    		display: flex;
    	}
    
    	.left {
    		 200px;
    		margin-right: 20px;
    	}
    	.right {
    		flex:1;
    		background-color: #369;
    	}
    
    </style>
    

      

  • 相关阅读:
    vue 同页面不同参数
    vue的data用到this问题
    vue轮播,不是只有左右切换的,还有只切换src的
    vue页面高度填充,不出现滚动条
    WdatePicker做出onchange效果
    总结最近移动端遇到的坑(auto-size + zepto)
    react
    ES6-set && 数组剔重
    [置顶] Jquery easyui+Jsonp+asp.net+翻页 事件版
    扩展Jquery easyui的validator插件
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/4903167.html
Copyright © 2011-2022 走看看