圣杯布局和双飞翼布局

圣杯布局

应用场景

• 两侧内容宽度固定，中间内容自适应
• 三栏布局，中间一栏最先加载、渲染出来

实现方法

float+margin

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

 

body{
    min-width: 500px;
}
div{
   text-align:center; 
}

#header{
  background-color:#f1f1f1;
}
#content{
  /*留出#Left和#Right的空间*/
  padding: 0 200px 0 300px;
}
#content #center{
  background-color:#ddd;
  width:100%;
}
#content #left{
  /*不写的话right不会生效*/  
  position:relative;
  background-color:red;
  width:300px;
  /*原本是center一行，left和right下方同行，-100%中100%是父盒子宽度*/
  /*相当于左右相对不变，移到上一行相同位置*/
  margin-left:-100%;
 /*right设置的是元素的右边缘，所以#left右边缘处于300px位置*/
  right:300px;
}
#content #right{
  background-color:blue;
  width:200px;
  /*此处可以理解为该设置使得right盒子缩小了200px*/
  /*在外界看来没有宽度了，所以能够在一行上显示*/
  margin-right: -200px;
}
#content .column{
  float:left;
}

#footer{
  background-color:#f1f1f1;
  /*不清除浮动的话#footer会跟left和right在同一行*/
  clear:both;
}

 效果展示

双飞翼布局

原理和应用场景同上，优化了圣杯布局需要相对定位的问题，常见于某宝网站。

实现方法

<div id="main" class="column">
  <div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

body{
  min-width: 500px;
}
div{
  text-align:center; 
}
#main{
  background-color: #ddd;
  width:100%;
}
#main #main-wrapper{
  margin:0 200px 0 300px;
}
#left{
  background-color:red;
  width:300px;
  margin-left:-100%;
}
#right{
  background-color:blue;
  width:200px;
  /*往左拖拽即可，写成margin-right虽然也会上去成为一行*/
  /*但是不会移动到mian-wrapper元素margin-right空出来的位置，而是接在margin-right位置后面*/
  margin-left: -200px;
}
.column{
  float:left;
}

效果展示

参考网站：

https://www.bilibili.com/video/BV11y4y117zf?p=7