浅谈 HTML 布局（二）

此文章只是为了让自己能更规范学习以及学会总结，并且让复习的时候不至于无从下手，都是从别的地方摘抄经过自己的总结所写，底部会附上摘抄的路径，如果看不明白我的文章，可以看看原文写的，如果有什么地方不正确，也欢迎小伙伴指出，大家一起学习~~

一、三栏布局 - 圣杯布局

要求：三栏布局 左右固定 中间自适应，不过中间列要写在前面保证优先渲染。

HTML 代码

<!-- 圣杯布局 middle 最先 -->
<div class="outer">
    <div class="middle">圣杯-middle</div>
    <div class="left">圣杯-left</div>
    <div class="right">圣杯-right</div>
</div>

样式代码：

* {
	margin: 0;
	padding: 0;
	border: none;
}

.left,
.right {
	width: 200px;
}

.left,
.middle,
.right {
	height: 100px;
}

.left {
	background: tomato;
}

.middle {
	background: lightgreen;
}

.right {
	background: gold;
}

圣杯布局 通过浮动和负边距实现

.outer{
	padding: 0 200px;
}

：使用内边距撑开左右两边 div 的宽度

.outer .middle{
	width: 100%;
	float: left;
}

：中间 div 宽度自适应

.outer1 .left {
	width: 200px;
	float: left;
}

.outer .left{
	position: relative;
	left: -200px;
	float: left;
	margin-left: -100%;
}

对于这一块，我很奇怪，为什么不用绝对定位，这样还更方便一点，不过既然这样写了，那么也就只能理解这里每句话的意思了。

• left: -200px; 在相对定位的作用下，（左 div） 向左移动（左 div）的宽度。
• margin-left: -100%; 相当于 top: -100px; 这里的 “ -100px; ” 是 div 的高度。这样就可以和 中间的 div 水平啦。

.outer .right{
	position: relative;
	left: 200px;
	float: left;
	margin-left: -200px;
}

• left: 200px;
• margin-left: -200px;

以上2个啊，不知道什么意思，等以后知道了再回来改好了。如果有小伙伴知道的话，麻烦留言告诉我。

二、三栏布局 - 双飞翼布局

要求：三栏布局 左右固定 中间自适应，不过中间列要写在前面保证优先渲染。

HTML 代码

<!-- middle 放最前且 多一层 div -->
<div class="outer">
	<div class="middle-wrap">
		<div class="middle">双飞翼布局-middle</div>
	</div>
	<div class="left">双飞翼布局-left</div>
	<div class="right">双飞翼布局-right</div>
</div>

样式代码：

* {
	margin: 0;
	padding: 0;
	border: none;
}

.left,
.right {
	width: 200px;
}

.left,
.middle,
.right {
	height: 100px;
}

.left {
	background: tomato;
}

.middle {
	background: lightgreen;
}

.right {
	background: gold;
}

middle 样式：

.outer .middle-wrap {
	width: 100%;
	float: left;
}

.outer .middle {
	margin: 0 200px;
}

.outer .left {
	float: left;
	margin-left: -100%;
}

• margin-left: -100%; 相当于 top: -100px; 这里的 “ -100px; ” 是 div 的高度。这样就可以和 中间的 div 水平啦。

下面是原文里 右 div 的样式代码

.outer .right {
	float: left;
	margin-left: -200px;
}

---

我觉得原文里的代码有点难理解，所以改了一下，效果还是一样的。

.outer .right {
	float: right;
	margin-left: -100%;
}

• float: right; 很容易理解，向右浮动呗。
• margin-left: -100%; 跟以上以上，相当于 top: -100px;

本文引自：【前端面试】同学，你会手写代码吗？