css实现三列布局，左右固定宽度，中间自适应

标签：pad   str   利用   适应   浮动   使用   设置   改变   add   

• float 浮动法：中间的元素需放在最后，左右元素使用左浮动和右浮动，中间的元素使用 margin-left 和 margin-right 与两边留出间隔（就是两个浮动元素的宽度）

  • 缺点：三个元素的顺序受限，middle 必须放在最后，而且浏览器窗口宽度不够时，right 元素会被挤到下一行

  <div>
  	<div class="left"></div>
  	<div class="right"></div>
  	<div class="middle"></div>
  </div>
  

• 绝对定位法：左右两个元素使用 position: absolute 绝对定位，middle 使用 margin-left 和 margin-right 与两边留出间隔（就是两个浮动元素的宽度）

  • 与 “浮动法”相比，这种方法可以随意放置三个元素的位置

  <div>
  	<div class="left"></div>
  	<div class="middle"></div>
  	<div class="right"></div>
  </div>
  

• flex 布局：给父元素 设置 display: flex; 中间元素 设置 flex: 1;

  • 缺点：middle 元素必须放置在中间位置，否则需要使用css的order属性改变元素位置

  <div class="test-2">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
  </div>
  
   .test-2 {
      display: flex;
      height: 100px;
      background: #000;
    }
    .test-2 .left {
      width: 100px;
      background: #fff;
    }
    .test-2 .right {
      width: 200px;
      background: #f00;
    }
    .test-2 .middle {
      flex: 1;
    }
  

扩展之圣杯布局、双飞翼布局（利用浮动、定位、负边距）

• 圣杯布局：

  <div class="test-2">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
  </div>
  
  

   /* 圣杯 布局 */
    .test-2 {
      padding: 0 200px 0 100px;
    }
    .test-2 .left,.right,.middle {
      position: relative;
      float: left;
      height: 100px;
    }
    .test-2 .left {
      width: 100px;
      margin-left: -100%;
      left: -100px;
      background: #00f;
    }
    .test-2 .right {
      width: 200px;
      margin-left: -200px;
      right: -200px;
      background: #f00;
    }
    .test-2 .middle {
      width: 100%;
      background: #0f0;
    }
  

• 双飞翼布局：

  <div class="test-2">
        <div class="middle">
          <div class="middle-wrap">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
  </div>
  

     /* 双飞翼 布局 */
    .test-2 .left,.right,.middle {
      float: left;
      height: 100px;
    }
    .test-2 .left {
      width: 100px;
      margin-left: -100%;
      background: #00f;
    }
    .test-2 .right {
      width: 200px;
      margin-left: -200px;
      background: #f00;
    }
    .test-2 .middle {
      width: 100%;
      background: #0f0;
    }
    .test-2 .middle .middle-wrap {
      margin: 0 200px 0 100px;
    }
  

• 圣杯布局和双飞翼布局的区别：

  • 首先两者的html布局，都是中间元素 放在最前面
  • 圣杯布局：首先设置父元素的padding-left和padding-right分别为左右元素的宽度，然后设置三个元素为左浮动，设置中间元素的宽度为100%，设置左边元素的margin-left为-100%，右边元素的margin-left为负的 自身宽度，此时中间元素的左右都会被挡住一部分，解决方法为：设置三个元素的position：relative，然后设置左元素的left：负的自身宽度，右元素的right：负的自身宽度
  • 双飞翼布局：不设置父元素的padding值，与圣杯布局相同，也设置三个元素为左浮动，设置中间元素的宽度为100%，设置左边元素的margin-left为-100%，右边元素的margin-left为负的 自身宽度，其解决中间元素被挡住一部分的解决方法为：为中间元素多包裹一层 div ：<div class="middle"> <div class="middle-wrap">main</div> </div>，设置中间元素 内层div 的margin-left和margin-right分别为左、右元素的宽度

知识点扩展：

• margin-left为 -100% 时，表示 该元素 相对于上一个浮动元素 向左移动整个窗口宽度的50%

css实现三列布局，左右固定宽度，中间自适应

标签：pad   str   利用   适应   浮动   使用   设置   改变   add   

原文地址：https://www.cnblogs.com/upward-lalala/p/14787998.html