圣杯（左右均有两种定位方法）和淘宝双飞翼

2020-02-26 09:36:02 阅读：331 来源： 互联网

标签：圣杯 width break 双飞翼淘宝 word 200px margin left

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

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
html {
  box-sizing: border-box;
}
*,*::before,*::after {
  box-sizing: inherit;
}
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 2222222222222222222222222222
222222222222222222 222222222222222 2222222222222222222222222222222222
222222222222222222 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>

newway007 发布了118 篇原创文章 · 获赞 3 · 访问量 3045 私信关注

标签：圣杯,width,break,双飞翼,淘宝,word,200px,margin,left
来源： https://blog.csdn.net/newway007/article/details/104510748

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

圣杯（左右均有两种定位方法）和淘宝双飞翼