转载：关于圣杯布局一（一道比较有趣的前端面试题)-CSDN博客

本文链接：https://blog.csdn.net/huang348102023/article/details/83925769

布局基本框架

题目描述：

Left与Right是固定宽度，中间Main要求自适应，核心问题是Html文档流必须从Main开始然后才是两侧，下面就是这个要求的Html结构

<div id=”main”>
</div>
<div id=”left”>
</div>
<div id=”right”>
</div>

常规做法把两侧放在主要内容的前面进行左右浮动，然后中间使用边距，这样有个缺点就是网速慢的时候主要内容却在最后显示。

按照上面的Html布局，如果按常规把left和right各自左右浮动，中间main使用边距的话就会出现下面这种情况：

侧栏与主要内容错开

下面是我的解决方案：

只有使Main不占用文档流空间才能让三列对齐而，让Main不占据文档流的方法有两种：

一、使用绝对定位。

绝对定位需要设置左右边距（实际应用中往往需要在外面套一个相对定位的盒子）。整个Demo如下（通过Firefox与IE5.5——8测试）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏布局</title>
<style type="text/css">
* { margin:0; padding:0; }
#main { position:absolute; left:200px; right:200px }/*绝对定位，使content不占据html文档流空间，让后面的left,right浮上去*/
#left, #right { width:200px; }
#left { float:left; }
#right { float:right; }
</style>
</head>
<body>
<div id="main">
<p style="height:999px; background:#fffaba; ">content</p>
</div>
<div id="left">
<p style="height:999px; background:#8fc41f;">left</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right</p>
</div>
</body>
</html>

二、Main左浮动。
如果Main浮动的话首先要解决宽度自适应的问题，设置宽度100%显示，然后就得把Left拉到Main左侧，这里巧妙使用两种偏移方法。IE6会有兼容问题，需要Hack一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏布局-浮动方法</title>
<style type="text/css">
* { margin:0; padding:0; }
#wrap { padding:0 300px 0 200px; *overflow:hidden;  }
#main { float:left; width:100%; }
#left, #right { position:relative; _display:inline; }
#left { width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; }
#right { width:300px; float:right; margin-right:-300px; }
</style>
</head>
<body>
<div id="wrap">
 <div id="main">
 <p style="height:999px; background:#fffaba; ">content</p>
 </div>

 <div id="left">
 <p style="height:999px; background:#8fc41f;">left</p>
 </div>
 <div id="right">
 <p style="height:999px; background:#00b7ef;">right2</p>
 </div>
</div>
</body>
</html>

后记：关于侧栏宽度固定，主要部分宽度自适应的布局是再普通不过了，而大部分人的做法就是把侧栏放在自适应盒子前面，然后进行浮动解决，从来没有想过使用最优化的html文档流完成这个布局。第一种方法由于用了绝对定位，适合在特殊应用中使用，常规布局推荐使用第二种解决。

转载地址：http://www.planeart.cn/?p=446

说明：本文原来的标题是：来自腾讯的前端工程师面试题，这里我把他改了，是因为我在搜索这个三栏布局实现的时候，发现这种布局有一个更好的名字来称呼“圣杯布局”。后面我会转载一篇文章来更详细的介绍一下“圣杯布局”，纯属标记一下。