圣杯布局与双飞翼布局

最新推荐文章于 2022-08-16 19:48:13 发布

dancing_burry

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量291

点赞数

分类专栏： DIV+CSS 文章标签： css 布局

DIV+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局的共同点

三栏布局；
主要内容写在前面，最先载入，但布局位于非最前
两侧定宽，分别位于中间主体两侧（外），中间流式（自动宽度）

布局原理

三栏全部采用浮动（float: left）；
HTML内容出现顺序：main、left、right，要求首先载入主体（重要）内容，然后加载侧边栏；
（左）负边距（margin-left）超过元素自身宽度时（第二个浮动元素），即使父元素“容不下”2个浮动元素（第二个浮动元素会换行），第二个浮动元素也会移动到实际显示位置相邻的兄弟元素旁（父元素最右内侧），并占据一定空间，相当于“margin-left可以吃掉兄弟元素的margin”。当margin-left等于父元素宽度时，会移动到父元素最左侧（内侧）

圣杯布局

HTML页面代码

 
   <body>  
   <div class="container">  
     <div class="main">Main Content</div>  
     <div class="left">Left Side</div>  
     <div class="right">Right Bar</div>  
   </div>  
 </body>  
 
 

那么现在的要求是main位于中间，且适应容器宽度，left和right分别位于main两侧，三栏位于同一行。

基本CSS代码

 
   .container {  
   color: #fff;  
 }  
 .main {  
   float: left;  
   background-color: #f00;  
   height: 200px;  
     
   width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */  
 }  
 .left {  
   float: left;  
   height: 200px;  
   background-color: #0f0;  
   
   width: 200px;  
   margin-left: -100%; /* Float to left */  
 }  
 .right {  
   float: left;  
   height: 200px;  
   background-color: #00f;  
   
   width: 250px;  
   margin-left: -250px; /* Float to right */  
 }  
 
 

效果如下图

但注意到main中内容已经被遮挡（默认text-align: left）。

圣杯布局给出的思路是为两侧设置相对定位（position: relative），同时为父元素（container）设置两侧留白（padding），为两侧留出空间，即可实现两侧与main分离。

圣杯布局CSS代码

 
   .container {  
   color: #fff;  
   
   padding: 0 250px 0 200px; /* 为两侧留白 */  
 }  
 .main {  
   float: left;  
   background-color: #f00;  
   height: 200px;  
     
   width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */  
 }  
 .left {  
   float: left;  
   height: 200px;  
   background-color: #0f0;  
   
   width: 200px;  
   margin-left: -100%; /* Float to left */  
   
   position: relative;  
   left: -200px; /* 找回自身空间 */  
 }  
 .right {  
   float: left;  
   height: 200px;  
   background-color: #00f;  
   
   width: 250px;  
   margin-left: -250px; /* Float to right */  
   
   position: relative;  
   right: -250px; /* 找回自身空间 */  
 }  
 
 

效果如下图

双飞翼布局

圣杯布局使用了负边距+相对定位方式，不添加任何额外HTML代码，然而相对定位对性能有影响，考虑到实际应用情况，淘宝UED对此进行了优化，遗弃相对定位，具体做法是为main添加额外的包裹标签。

双飞翼布局HTML代码

 
    [html]  
   
 <body>  
   <div class="container">  
     <div class="main"><div class="wrap">Main Content</div></div>  
     <div class="left">Left Side</div>  
     <div class="right">Right Bar</div>  
   </div>  
 </body>  

添加wrap元素

 
    [css] 
   
 .container {  
   color: #fff;  
   
   /*padding: 0 250px 0 200px;*/  
 }  
 .main {  
   float: left;  
   background-color: #f00;  
   height: 200px;  
     
   width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */  
 }  
 .left {  
   float: left;  
   height: 200px;  
   background-color: #0f0;  
   
   width: 200px;  
   margin-left: -100%; /* Float to left */  
   
   /*position: relative; */  
   /*left: -200px; */  
 }  
 .right {  
   float: left;  
   height: 200px;  
   background-color: #00f;  
   
   width: 250px;  
   margin-left: -250px; /* Float to right */  
   
   /*position: relative;*/  
   /*right: -250px; */  
 }  
 .wrap {  
   padding: 0 250px 0 200px;  
 }  

达到的效果与之前一致

浮动+负边距布局引申

我们要解决的问题是，主要内容先载入，也就是HTML代码写在前面，而显示在页面的中部（非最前面）。既然负边距可以将浮动元素上移，那么我想就可以创造出这样一种布局方式：

HTML代码如下

 
    [html]  
   
 <body>  
   <div class="container">  
     <div class="tip">content tip</div>  
     <div class="main">main</div>  
     <div class="col1">col1</div>  
     <div class="col2">col2</div>  
   </div>  
 </body>  

CSS代码如下

 
    [css]  
   
 .tip {  
   float: left;  
   width: 100%;  
 }  
 .main {  
  float: left;  
  width: 50%;  
  margin-left: -75%;  
 }  
 .col1 {  
   float: left;  
   width: 25%;  
   margin-left: -100%;  
 }  
 .col2 {  
   float: left;  
   width: 25%;  
   margin-left: -25%;  
 }  

最终创建出3栏自适应宽度布局，数值可自行调整，tip元素内容不可见，可用来提高Accessibility，效果如下