首页 > 其他分享> > css实现三列布局，左右固定宽度，中间自适应

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

2021-05-19 23:35:41 作者：互联网

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%

标签：right,元素,三列,middle,宽度,test,margin,css,left
来源： https://www.cnblogs.com/upward-lalala/p/14787998.html