重温圣杯布局和双飞翼布局
1.圣杯布局
<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink; padding:0 200px;min-width:600px;}/*---大盒子用padding撑开两边的的位置---*/
.all .center{width: 100%; height:300px; background: orange; float: left;}
/*---左右两边的关键先是通过margin，让左右两个盒子回到正常轨道，然后就是给了相对定位，再通过left移回正确位置---*/
.all .left{width: 200px;height: 300px;background: green; float: left; margin-left: -100%; position: relative; left:-200px;}
.all .right{width: 200px;height: 300px;background: skyblue; float: right;margin-left: -200px;position: relative; left:200px;}
style>
head>
<body>
<div class="all">
<div class="center">这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间div>
<div class="left">这个是左边div>
<div class="right">这个是右边div>
div>
body>
html>2.双飞翼布局
<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink;}
.all .center{width: 100%; height: 300px; background: yellowgreen; float: left;}
/*---中间盒子一开始充满整一行，然后再通过两边盒子处理布局位置，最后给中间盒子抱一个div，用margin撑开两边的内容---*/
.all .left{width: 200px;height: 300px; background: skyblue;float: left; margin-left: -100%;}
.all .right{width: 200px;height: 300px; background: orange; float: right; margin-left: -200px;}
.all .center div{margin:0 200px;}
style>
head>
<body>
<div class="all">
<div class="center">
<div>你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多div>
div>
<div class="left">左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边div>
<div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边div>
div>
body>
html>最近发现圣杯跟双飞翼布局里面的内容用英文或者数字来填充的话，布局是会崩的，解决方法是英文或数字要有空格，不知道是不是占位符的问题。