三欄佈局兩欄佈局

時間 2019-11-11

標籤佈局简体版

原文原文鏈接

參考學習：https://www.cnblogs.com/imwtr/p/4441741.html
https://www.cnblogs.com/woodk/p/5147085.html
https://blog.csdn.net/wangchengiii/article/details/77926868
雙飛翼佈局：html

<!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{
			width: 100%;
			background-color: red;
		}
		.main .mainner{
			margin :0 100px 0 200px;

		}
		.left{
			width: 200px;
			background-color: green;
			margin-left: -100%;
		}
		.right{
			width: 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>

聖盃佈局：web

<!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{
		width: 100%;
		background-color: red;
	}
	.left{
		width: 200px;
		background-color: green;
		margin-left:-100%;
		left: -200px;
	}
	.right{
		width: 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，造成獨立區域，達到效果。svg

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
.header{
	height: 50px;
	background-color: green;
}
.main .left{
	width: 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 {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：對右側:div進行絕對定位，而後再設置right=0，便可以實現寬度自適應flex

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 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.net

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

方法4：使用flex佈局code

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

三欄佈局 兩欄佈局

三欄佈局兩欄佈局