三栏布局的七种方式

  • A+
所属分类:CSS

样式表


html{
	font-size: 125%;
}
body,
section,
div{
	padding: 0;
	margin: 0;
}
header{
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-size: 26px;
	background: #f88;
}
h1{
	text-align: center;
	background: lightblue;
}
.screen{
	width: 100%;
	height: 200px;
}
.main{
	background: #a0b3d6;
}
.left,
.right{
	background: #ffe6b8;
}
/****GRID 布局****/
.grid{
	display: grid;
	display: -webkit-grid;
	grid-template-columns: 5rem auto 5rem;
	-webkit-grid-template-columns: 5rem auto 5rem;
}
.grid .main{
	margin: 0 10px;
}
/****FLEX 布局****/
.flex{
	display: flex;
	display: -webkit-flex;
}
.flex .main{
	display: table-cell;
	width: 100%;
}
.flex .left,
.flex .right{
	flex-shrink: 0;
	-webkit-flex-shrink: 0;
	width: 5rem;
}
.flex .left{
	margin-right: 10px;
}
.flex .right{
	margin-left: 10px;
}
/****BOX 布局****/
.box{
	display: box;
	display: -webkit-box;
	display: -moz-box;
	box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
}
.box .main{
	box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
}
.box .left,
.box .right{
	width: 5rem;
	height: 100%;
}
.box .left{
	margin-right: 10px;
}
.box .right{
	margin-left: 10px;
}
/****TABLE 布局****/
.table{
	display: table;
}
.table .left,
.table .right{
	display: inline-block;
	width: 100px;
	height: 100%;
}
.table .left{
	float: left;
	margin-right: 10px;
}
.table .right{
	float: right;
	margin-left: 10px;
}
.table .main{
	display: table-cell;
	width: 100%;
	height: 100%;
}
/****浮动布局****/
.common_01 .left,
.common_01 .right{
	height: 100%;
	width: 5rem;
}
.common_01 .left{
	float: left;
}
.common_01 .right{
	float: right;
}
.common_01 .main{
	margin: 0 110px;
	height: 100%;
}
/****MARGIN负值布局****/
.common_02 .wrap{
	width: 100%;
	height: 100%;
	float: left;
}
.common_02 .wrap .main{
	margin: 0 110px;
	height: 100%;
}
.common_02 .left,
.common_02 .right{
	float: left;
	width: 100px;
	height: 100%;
}
.common_02 .left{
	margin-left: -100%;
}
.common_02 .right{
	margin-left: -100px;
}
/****绝对定位布局****/
.common_03{
	position: relative;
}
.common_03 .main{
	margin: 0 110px;
	height: 100%;
}
.common_03 .left,
.common_03 .right{
	position: absolute;
	top: 0;
	width: 5rem;
	height: 100%;
}
.common_03 .left{
	left: 0;
}
.common_03 .right{
	right: 0;
}

HTML


<header>三栏布局示例</header>
<h1>GRID 布局</h1>
<section class="screen grid">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</section>
<h1>FLEX 布局</h1>
<section class="screen flex">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</section>
<h1>TABLE 布局</h1>
<section class="screen table">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</section>
<h1>BOX 布局</h1>
<section class="screen box">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</section>
<h1>浮动布局</h1>
<section class="screen common_01">
	<div class="left"></div>
	<div class="right"></div>
	<div class="main"></div>
</section>
<h1>MARGIN负值布局</h1>
<section class="screen common_02">
	<div class="wrap">
		<div class="main"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</section>
<h1>绝对定位布局</h1>
<section class="screen common_03">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</section>
weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: