兩欄、三欄佈局

兩欄佈局5-1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.left{
		background:#CCC;
		width:200px;
		float:left;
	}
	.right{
		background:pink;
		margin-left:200px;
		width:auto
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>12</div>
		<div class='right'>34</div>
	</div>
</body>
</html>
複製代碼

兩欄佈局5-2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.left{
		background:#CCC;
		width:200px;
		float:left;
	}
	.right{
		background:pink;
		overflow:hidden
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>12</div>
		<div class='right'>34</div>
	</div>
</body>
</html>
複製代碼

兩欄佈局5-3

flexhtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		display:flex;
	}
	.left{
		background:#CCC;
		width:200px;
	}
	.right{
		background:pink;
		flex:1
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>12</div>
		<div class='right'>34</div>
	</div>
</body>
</html>
複製代碼

兩欄佈局5-4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		position:relative;
	}
	.left{
		background:#CCC;
		position:absolute;
		width:200px;
	}
	.right{
		background:gold;
		margin-left:200px;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>12</div>
		<div class='right'>34</div>
	</div>
</body>
</html>
複製代碼

兩欄佈局5-5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		position:relative;
	}
	.left{
		background:#CCC;
		width:200px;
	}
	.right{
		position:absolute;
		background:gold;
		top:0;
		right:0;
		bottom:0;
		left:200px;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>12</div>
		<div class='right'>34</div>
	</div>
</body>
</html>

複製代碼

三欄佈局5-1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		position:relative;
	}
	.left{
		position:absolute;
		background:#CCC;
		width:20px;
	}
	.right{
		position:absolute;
		background:gold;
		width:80px;
		top:0;
		right:0;
	}
	.center{
		background:tomato;
		margin-left:20px;
		margin-right:80px;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>1</div>
		<div class='center'>2</div>
		<div class='right'>3</div>
	</div>
</body>
</html>
複製代碼

三欄佈局5-2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		display:flex;
	}
	.left{
		background:#CCC;
		width:20px;
	}
	.right{
		background:gold;
		width:80px;
	}
	.center{
		background:tomato;
		flex:1;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>1</div>
		<div class='center'>2</div>
		<div class='right'>3</div>
	</div>
</body>
</html>
複製代碼

三欄佈局5-3

中間一欄必須放到最後markdown

由於浮動脫離文檔流，因此中間欄必定要放到最後面
若是有文字出現，佈局就會錯亂，致使擴展性很差
這是float所產生的佈局影響所致使的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		
	}
	.left{
		background:#CCC;
		float:left;
		width:20px;
	}
	.right{
		background:gold;
		float:right;
		width:70px;
	}
	.center{
		background:tomato;
		margin-left:20px;
		margin-right:70px;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='left'>1</div>
		<div class='right'>3</div>
		<div class='center'>2</div>
	</div>
</body>
</html>
複製代碼

三欄佈局5-4

聖盃佈局佈局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.outer{
		padding-left:50px;
		padding-right:60px;
	}
	.left{
		background:pink;
		left:-50px;
		float:left;
		margin-left:-100%;
		position:relative;
		width:50px;
	}
	.right{
		background:gold;
		float:right;
		left:60px;
		position:relative;
		margin-left:-60px;
		width:60px;
	}
	.center{
		background:tomato;
		width:100%;
		float:left;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class='center'>2</div>
		<div class='left'>1</div>
		<div class='right'>3</div>
	</div>
</body>
</html>
複製代碼

三欄佈局5-5

雙飛翼佈局flex

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.center,.left,.right{
		float:left;
	}
	.center{
		background: #ccc;
		width:100%;
	}
	.inner{
		margin: 0 100px;	
	}
	.left{
		width:100px;
		background: pink;
		margin-left:-100%;
	}
	.right{
		width:100px;
		background: tomato;
		margin-left: -100px;
	}
</style>
</head>
<body>
	<div class='outer'>
		<div class="center">
			<div class="inner">inner</div>
	  	</div>
	  	<div class="left">left</div>
	  	<div class="right">right</div>
	</div>
</body>
</html>

複製代碼