hailiting Blog

# 重温双飞翼布局和圣杯布局

# 目的

  • 都是为了解决两边定宽，中间自适应的三栏布局，中间栏要放在文档流的前面优先渲染。
  • 允许三列中的任意一列成为最高列

# 双飞翼与圣杯布局的不同

不同在于解决中间栏 div 内容被遮挡的思路不一样：

  • 圣杯布局：中间 div 设置左右padding-left和padding-right，将左右两个 div 用相对布局position:relative分别设置 right 和 left 属性，以便左右两栏不遮挡中间 div
  • 双飞翼布局：为中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，改子 div 里用 margin-left 和 margin-right 为左右栏 div 留出位置。
    圣杯相对于双飞翼多了四个属性，少一个 div.

# 具体实践

# 一：圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {margin: 0;padding: 0;}
    body,html {height: 100%; }
    body {min-width: 550px; }
    .wrap {min-height: 100%;}
    #container {padding-left: 200px;  padding-right: 150px; padding-bottom: 50px;}
		#container .column {float: left; }
		#center {width: 100%; }
		#left {width: 200px;  margin-left: -100%; position: relative; right: 200px; }
		#right {width: 150px; margin-right: -150px;}
		#footer { clear: both;margin-top: -50px;height: 50px;z-index: 9999;}
    // end
		body {background: #FFF;}
		#header, #footer {font-size: large;text-align: center;padding: 0.3em 0;background: #999;}
		#left {background: #66F;}
		#center {background: #DDD;}
		#right {background: #F66;}
		.column {padding-top: 1em;text-align: justify;}
  </style>
</head>
<body>
  <div class="wrap">
    <div id="header"></div>
    <div id="container">
      <div id="center" class="column"></div>
      <div id="left" class="column"></div>
      <div id="right" class="column"></div>
    </div>
  </div>
  <div id="footer"></div>
</body>
</html>

# 二：双飞翼布局

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>双飞翼布局</title>
  <style>
	  * {margin: 0;padding: 0;}
    body,html {height: 100%; }
    body {min-width: 550px; }
    .wrap {min-height: 100%;}
    #container {width: 100%;}
		.column {float: left;}
		#center {margin-left: 200px;margin-right: 150px;padding-bottom:50px;}
		#left {width: 200px;margin-left: -100%;}
		#right {width: 150px; 	margin-left: -150px;}
		#footer { clear: both;margin-top: -50px;height: 50px;z-index: 9999;}
		/*** end ***/
		body {background: #FFF;}
		#header, #footer {font-size: large;text-align: center;padding: 0.3em 0;background: #999;}
		#left {background: #66F;}
		#center {background: #DDD;}
		#right {background: #F66;}
		.column,.column #center{padding-top: 1em;text-align: justify;}
		#container {padding-top: 0;}
    </style>
</head>

<body>
  <div id="header">This is the header.</div>
  <div id="container" class="column">
      <div id="center"></div>
	</div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
	<div id="footer"></div>
</body>
</html>

# 三：更多实践

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

# 3.1 使用 calc()函数来计算

.column{float:left;}
#center{margin-left: 200px;margin-right:150px;width: calc(100%-350px)}

# 3.2 使用border-box

.column{float:left;}
#center{padding-left:200px;padding-right:150px;box-sizing:border-box;width:100%}

# 3.3 使用flex

<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

<style>
#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}
</style>

← 知识点 →