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>
    

      

  • 相关阅读:
    HDU 4348 To the moon(可持久化线段树)
    HDU 5875 Function 大连网络赛 线段树
    HDU 5877 2016大连网络赛 Weak Pair(树状数组,线段树,动态开点,启发式合并,可持久化线段树)
    HDU 5876 大连网络赛 Sparse Graph
    HDU 5701 中位数计数 百度之星初赛
    CodeForces 708B Recover the String
    Java实现 蓝桥杯 算法提高 套正方形(暴力)
    ASP.NET生成验证码
    ASP.NET生成验证码
    ASP.NET生成验证码
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/4903167.html
Copyright © 2011-2022 走看看