双飞翼布局内容不换行_CSS布局

合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。

原文链接

单列布局

单列布局通常用于网站的首页，分为头部的导航、网页内容、页脚相关信息。

 //html
   <div class="body">
       <div class="header"></div>
       <div class="container"></div>
       <div class="footer"></div>
   </div>

   //css
   .body{
       max-width: 1200px;
       margin: 0 auto;
   }

优点：布局实现简单，界面显示整体性强，给人感觉简洁大方。

左右布局

左右布局常见于博客、后台管理系统，左侧为导航，右侧做内容显示。

 //html
  <div class="body">
       <div class="left"></div>
       <div class="right"></div>
   </div>

float+margin

左侧元素设置成向左浮动并固定宽度，右侧元素左外边距预留出左侧元素的宽度。

 //css
   .body{
       max-width: 1200px;
       margin: 0 auto;
   }

   .left{
       width: 200px;
       float: left;
   }

   .right{
       margin-left: 200px;
   }

优点：布局简单，右侧宽带可自适应。

position+margin

左侧元素用绝对定位固定在左边，右侧元素预留左外边距。

 .body{
       max-width: 1200px;
       margin: 0 auto;
   }

   .left{
       position: absolute;
       top: 0;
       left: 0;
       width: 200px;
   }

   .right{
       margin-left: 200px;
   }

优点：左侧内容可固定位置，右侧内容宽度自适应。

圣杯布局

圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。

float+负margin+padding+position

布局步骤：

1、三列内容都设置向左浮动。

2、设置container宽度为100%，设置两侧栏的宽度。

3、设置left左边距为负100%，设置right左边距为负的自身宽度。

4、设置body的padding值给左右两块内容留空间。

5、设置left、right为相对定位，左侧的left属性值为负自身宽度，右侧的right属性值为负自身宽度。

 //html
   <div class="body">
       <div class="container"></div>
       <div class="left"></div>
       <div class="right"></div>
   </div>

   //css
   .body{
       padding: 0 150px;
   }

   .container{
       float: left;
       width: 100%;
   }

   .left, .right{
       position: relative;
       float: left;
       width: 150px;
   }

   .left{
       left: -150px;
       margin-left: -100%;
   }

   .right{
       right: -150px;
       margin-left: -150px;
   }

这种布局中html的顺序不能更改，当窗口过小时会出现布局错乱，可以设置min-widthmin-width解决。

双飞翼布局

双飞翼布局始于淘宝UED，与圣杯布局相似，但是做了改进，是用html结构的调整减少了相对属性设置

float+负margin+margin

布局步骤：

1、三列内容都设置向左浮动。

2、设置container宽度为100%，设置左右内容的宽度。

3、设置left左边距为负100%，设置right左边距为负自身宽度。

4、设置content的margin值给左右内容留空间。

 //html
   <div class="container">
       <div class="content"></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>

   //css
   .container, .left, .right{
       float: left;
   }

   .container{
       width: 100%;
   }

   .left{
       width: 150px;
       margin-left: -100%;
   }

   .right{
       width: 150px;
       margin-left: -150px;
   }

   .content{
       margin: 0 150px;
   }

优点：

• 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
• 双飞翼布局不用设置相对布局，以及对应的left和right值。
• 通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 150px; ,可以实现left+right+content的布局。

flex布局

与传统布局方式相比，flex提供了一套简洁、完整、响应式的解决方案。

可以看下flex布局学习了解一下。

这里只是简单介绍几种布局方式，display+position+float属性可以实现不同特殊效果布局展现形式，选择最适合的方案才是王道