三栏布局两栏布局

时间 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;
}

三栏布局 两栏布局

三栏布局两栏布局