圣杯（圣杯有两种定位）和淘宝双飞翼

作者: newway_001 | 来源:发表于2019-06-02 13:17 被阅读0次

圣杯（圣杯有两种定位）和淘宝双飞翼
CSS-布局4-双飞翼布局
特殊布局方法
CSS布局知识点
实现三栏布局的六种方式
双飞翼布局和圣杯布局的对比
2019-1-2
CSS 经典三列布局之双飞翼
圣杯布局和双飞翼布局
3.28圣杯布局和双飞翼布局

圣杯模型：
圣杯模型的核心在于父元素加padding。通过margin-left或者margin-right以及positive：relative定位左右两边元素；
以下左右元素的定位有两种写法，均写在注释里面

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
  height:200px;
  background: red;
  color:white;
  word-break:break-all;word-wrap:break-word；
/*为了防止单词和字符串过长，导致元素溢出而添加的css*/

}
#left {
  width: 200px;          /* LC width */
  right: 200px;    
   /* LC width */
   margin-left: -100%;
/* margin-left: calc(-100%  - 200px);*/ /*可以取代上两行，效果一样*/
  height:200px;
  background: yellow;
  color:green;
  word-break:break-all;word-wrap:break-word
}
#right {
  width: 150px; 
           /* RC width */
  /* margin-left: -150px;  
  right:-150px; */    /*这是另一种写法和 margin-right: -150px;效果一样*/
  margin-right: -150px;
  /* RC width */
  height:200px;
  background:black;
  color:white;
  word-break:break-all;word-wrap:break-word
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}
    </style>
</head>

<body>
    <div id="header"></div>
    <div id="container">
        <div id="center" class="column">2222222222222222222222222222222222
2222222222222 222222222222222 222222 2222222222222222222222222222222222222222
222222 222222222222222 222222222222222222222222222222222222222222
2222222222 222222222222222 222222</div>
        <div id="left" class="column">111111111111111111111111111111111
11111111111111222222222222222222222222222222
22222222222222222 222222222222222 222222 2222222222222222222222222222222222222222222222 222222222222222 2222222222222222222222222222222222222222222222222222 222222222222222 222222</div>
        <div id="right" class="column">aaaaasdgsadgsdfgasdgadsfgsdfgf22222222
222222222222222222222222222222222222222 2222222
22222222 222222 2222222222222222222222222222222
2222222222
22222 222222222222222 22222222222222222222222222222222222222222222
22222222 222222222222222 222222</div>
    </div>
    <div id="footer"></div>
</body>

</html>

淘宝双飞翼模型在于：给最先加载的main元素外面加一个包裹元素，
里面的子元素加上左右元素相对应的margin-left和margin-right；
再移动左右元素位置：

<!DOCTYPE html>
<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">
.main {        
           float: left;       
           width: 100%;   
        
           background:red;
 }  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           height:200px; 
           background:green;
           }   .extra {        
             float: left;        
             width: 230px;        
             margin-left: -230px;  
             height:200px; 
             background:pink;
 }
 #main-wrap {    margin: 0 230px 0 190px;   height:200px;  }
    </style>
</head>

<body>
    <div id="page">
        <div id="hd"></div>
        <div id="bd">
            <div class="main"><div id="main-wrap">#main</div></div>
            <div class="sub">2222222222</div>
            <div class="extra">111111111</div>
        </div>
        <div id="ft"></div>
    </div>

</body>

</html>