2017-03-24

CSS布局

先花1分钟时间，想想怎样实现一个三列布局？？？

在IFE的任务三和任务九中为实现这种布局想的几种方法。笔记~

PS:方便想象，左中右结构如下

1
2
3

<div id="left"></div>	// 左
<div id="middle"></div>	// 中
<div id="right"></div>	// 右

问题描述：左右两栏宽度固定，中间一栏自适应。应用背景：有时在网页中，左边栏通常作为侧栏显示一些次要信息，右边栏或者为广告位，需要优先渲染中间栏。

方案：

HTML结构按中左右顺序，CSS为浮动+定位+内边距（圣杯布局）
HTML结构按中左右顺序，CSS为浮动+外边距（双飞翼布局）

第一种方式实现代码

/* HTML结构 */
<div class="container">
	<div id="middle">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
	<div id="left">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
	<div id="right">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
</div>
/* CSS代码 */
.container {
	padding-left: 200px;
	padding-right: 220px;
	position: relative;
	overflow: hidden;
	background-color: #eee;
}
#left, #middle, #right {
	float: left;
	position: relative;
}
#left {
	left: -200px;
	margin-left: -100%;
	width: 200px;
	background-color: red;
}
#middle {
	width: 100%;
	background-color: green;
}
#right {
	right: -220px;
	margin-left: -220px;
	width: 220px;
	background-color: blue;
}

注意：.container的宽度不能设置为100%！！否则左右两栏会溢出内容区

第二种方式实现代码

/* HTML结构 */
<div class="container">
	<div id="middle">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
</div>
<div id="left">
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
</div>
<div id="right">
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
</div>
/* CSS代码 */
#left, #right, .container {
	float: left;
}
#left {
	margin-left: -100%;
	width: 200px;
	background-color: red;
}
#right {
	margin-left: -220px;
	width: 220px;
	background-color: blue;
}
.container {
	width: 100%;
	background-color: #eee;
}
#middle {
	margin-left: 200px;
	margin-right: 220px;
	background-color: green;
}

两种布局方式对比

相同点：

都利用了浮动
左栏左外边距均为-100%

不同点：

HTML结构不同，圣杯结构三栏同级，而双飞翼布局则是在中间栏外层再加上个包裹容器
圣杯布局利用相对定位+padding去除左栏和右栏对中间栏的遮挡
双飞翼布局则是利用中间栏的外边距
圣杯布局将中间栏的宽度设为100%，而双飞翼布局将中间栏的包裹层宽度设为100%

两种布局方式的效果是一样的：三栏布局

问题扩展：不限宽高
布局策略：

display: flex

对容器使用display: flex;，设置justify-content属性，有五个可选值：flex-star左对齐，'center’居中，flex-end右对齐，space-between两端对齐，中间内容均匀分布，space-around均匀分布（与space-between不同的是没有两端对齐）

需要对自适应的子元素设置width: 100%

最终实现等高布局，高度为子元素中最大的高度

/* HTML结构 */
<div class="container">
	<div id="left">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
	<div id="middle">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
	<div id="right">
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</div>
</div>
/* CSS代码 */
.container {
	display: flex;
	justify-content: space-between;
	background-color: #eee;
}
#left {
	width: 200px;
	background-color: red;
}
#middle {
	width: 100%;
	background-color: green;
}
#right {
	width: 220px;
	background-color: blue;
}