原码笔记

原码笔记

css多种方式实现双飞翼布局

小诸哥 0

圣杯布局、双飞翼布局效果图

从效果图来看圣杯布局、双飞翼布局效果是一样一样的。

圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%

圣杯布局

  1. <style>
  2.      *{
  3.          margin: 0;
  4.          padding: 0;
  5.          box-sizing: border-box;
  6.      }
  7.      .clearfix:before,
  8.      .clearfix:after{
  9.          display: table;
  10.          content: " ";
  11.          clear: both;
  12.      }
  13.      .container{
  14.          padding: 0 200px;
  15.      }
  16.      .header,
  17.      .footer{
  18.          height: 200px;
  19.          font-size: 28px;
  20.          background-color: #f3f3f3;
  21.      }
  22.      .left{
  23.          position: relative;
  24.          /* 2、将.left再次拉到最左边，否则.main的左侧会有200px的空白 */
  25.          left: -200px;
  26.          float: left;
  27.          width: 200px;
  28.          min-height: 300px;
  29.          /* 1、将.left拉到最左边，原来.left是掉下去的 */
  30.          margin-left: -100%;
  31.          background-color: #f00;
  32.      }
  33.      .main{
  34.          float: left;
  35.          width: 100%;
  36.          min-height: 300px;
  37.          background-color: #c32228;
  38.      }
  39.      .right{
  40.          position: relative;
  41.          /* 2、将.right再次拉到最右边，否则.main的右侧会有200px的空白 */
  42.          right: -200px;
  43.          float: left;
  44.          width: 200px;
  45.          /*/1、将.right拉到最右边，原来.right是掉下去的 */
  46.          margin-left: -200px;
  47.          min-height: 300px;
  48.          background-color: #f90;
  49.      }
  50. </style>
  1. <div class="header">header</div>
  2. <div class="container clearfix">
  3.      <div class="main">main</div>
  4.      <div class="left">left</div>
  5.      <div class="right">right</div>
  6. </div>
  7. <div class="footer">footer</div>

浮动实现双飞翼布局

  1. <style>
  2.      *{
  3.          margin: 0;
  4.          padding: 0;
  5.          box-sizing: border-box;
  6.      }
  7.      .clearfix:before,
  8.      .clearfix:after{
  9.          display: table;
  10.          content: " ";
  11.          clear: both;
  12.      }
  13.      .header,
  14.      .footer{
  15.          height: 200px;
  16.          font-size: 28px;
  17.          background-color: #f3f3f3;
  18.      }
  19.      .left{
  20.          float: left;
  21.          width: 200px;
  22.          min-height: 300px;
  23.          /* 将.left拉到最左边，原来.left是掉下去的 */
  24.          margin-left: -100%;
  25.          background-color: #f00;
  26.      }
  27.      .main{
  28.          float: left;
  29.          width: 100%;
  30.          min-height: 300px;
  31.          /* .left、.right各占了200px，因此需要将其抵消掉 */
  32.          padding: 0 200px;
  33.          background-color: #c32228;
  34.      }
  35.      .right{
  36.          float: left;
  37.          width: 200px;
  38.          /* 将.right拉到最右边，原来.right是掉下去的 */
  39.          margin-left: -200px;
  40.          min-height: 300px;
  41.          background-color: #f90;
  42.      }
  43.     
  44. </style>
  1. <div class="header">header</div>
  2. <div class="container clearfix">
  3.      <div class="main">
  4.          <div class="main-inner">main</div>
  5.      </div>
  6.      <div class="left">left</div>
  7.      <div class="right">right</div>
  8. </div>
  9. <div class="footer">footer</div>

table-cell实现双飞翼布局(IE8也兼容哦~)

  1. <style>
  2.      *{
  3.          margin: 0;
  4.          padding: 0;
  5.          box-sizing: border-box;
  6.      }
  7.      .container{
  8.          display: table;
  9.      }
  10.      .header,
  11.      .footer{
  12.          height: 200px;
  13.          font-size: 28px;
  14.          background-color: #f3f3f3;
  15.      }
  16.      .left,
  17.      .right,
  18.      .main{
  19.          /* 外层容器使用table-cell布局，设置元素为table-cell布局后它们就能在一行显示了，display: table-cell;设置宽度无效，
  20. 因此他们的宽度由内容撑开。 */
  21.          display: table-cell;
  22.      }
  23.      .left-inner{
  24.          width: 200px;
  25.          min-height: 300px;
  26.          background-color: #f00;
  27.      }
  28.      .main{
  29.          width: 100%;
  30.      }
  31.      .main-inner{
  32.          min-height: 300px;
  33.          background-color: #c32228;
  34.      }
  35.      .right-inner{
  36.          width: 200px;
  37.          min-height: 300px;
  38.          background-color: #f90;
  39.      }
  40. </style>
  1. <div class="header">header</div>
  2. <div class="container clearfix">
  3.     
  4.      <div class="left">
  5.          <div class="left-inner">left</div>
  6.      </div>
  7.      <div class="main">
  8.          <div class="main-inner">main</div>
  9.      </div>
  10.      <div class="right">
  11.          <div class="right-inner">right</div>
  12.      </div>
  13. </div>
  14. <div class="footer">footer</div>

绝对定位实现双飞翼布局

使用绝对定位实现有个小问题：父容器的高度只能由.main的高度来决定

  1. <style>
  2.      *{
  3.          margin: 0;
  4.          padding: 0;
  5.          box-sizing: border-box;
  6.      }
  7.      .container{
  8.          position: relative;
  9.          padding: 0 200px;
  10.      }
  11.      .header,
  12.      .footer{
  13.          height: 200px;
  14.          font-size: 28px;
  15.          background-color: #f3f3f3;
  16.      }
  17.      .left{
  18.          position: absolute;
  19.          top: 0;
  20.          left: 0;
  21.          width: 200px;
  22.          min-height: 300px;
  23.          background-color: #f00;
  24.      }
  25.      .main{
  26.          min-height: 300px;
  27.          background-color: #c32228;
  28.      }
  29.      .right{
  30.          position: absolute;
  31.          top: 0;
  32.          right: 0;
  33.          width: 200px;
  34.          min-height: 300px;
  35.          background-color: #f90;
  36.      }
  37. </style>
  1. <div class="header">header</div>
  2. <div class="container clearfix">
  3.      <div class="left">left</div>
  4.      <div class="main">mian</div>
  5.      &lt;div class="right">right</div>
  6. </div>
  7. <div class="footer">footer</div>

使用flex实现双飞翼布局(有兼容性问题)

  1. <style>
  2.      *{
  3.          margin: 0;
  4.          padding: 0;
  5.          box-sizing: border-box;
  6.      }
  7.      .clearfix:before,
  8.      .clearfix:after{
  9.          display: table;
  10.          content: " ";
  11.          clear: both;
  12.      }
  13.      .container{
  14.          display: flex;
  15.      }
  16.      .header,
  17.      .footer{
  18.          height: 200px;
  19.          font-size: 28px;
  20.          background-color: #f3f3f3;
  21.      }
  22.      .left{
  23.          flex: 0 0 200px;
  24.          width: 200px;
  25.          min-height: 300px;
  26.          background-color: #f00;
  27.      }
  28.      .main{
  29.          flex: 1;
  30.          width: 100%;
  31.          min-height: 300px;
  32.          background-color: #c32228;
  33.      }
  34.      .right{
  35.          flex: 0 0 200px;
  36.          width: 200px;
  37.          min-height: 300px;
  38.          background-color: #f90;
  39.      }
  40. </style>
  1. <div class="header">header</div>
  2. <div class="container clearfix">
  3.     
  4.      <div class="left">left</div>
  5.      <div class="main">main</div>
  6.      <div class="right">right</div>
  7. </div>
  8. <div class="footer">footer</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

标签： 方式 实现

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇CSS 制作带边框背景色透明的消息框

下一篇css 盒模型 文档流 几种清除浮动的方法实例详解

相关文章