实现左边定宽右边自适应效果

关于在css实现左边定宽右边自适应效果在pc端的布局相对比较常见，小编就这个问题就来一起学习一下可以怎么实现？

html结构

1
2
3
4
5
<!-- 前提： 左边定宽，假设为100px -->
<section class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</section>

css方案

总结了以下几种

  1. 左边设置左浮动；右边宽度设置宽度100%
  2. 父容器设置display:flex；右边部分设置 flex:1
  3. 父元素设置display: table； 左右子元素设置dispaly: table-cell
  4. grid布局
  5. 左右子元素全部absolute
  6. 左子元素absolute；右子元素设置padding-left为左子元素的宽度
  7. 左右子元素设置浮动；右子元素使用 calc() 函数
  8. 设置左右子元素inline-block；左右子元素中使用 calc() 函数
  9. 左子元素设置左浮动；右子元素设置overflow: hidden(触发BFC） (推荐使用)
  10. 使用负margin

1、左边设置左浮动，右边宽度设置宽度100%

1
2
3
4
5
6
7
8
9
10
11
.container {
  .left {
    float: left;
    width: 100px;
    border: 1px solid red;
  }
  .right {
    width: 100%;
    border: 1px solid green;
  }
}

2、 父容器设置display:flex；右边部分设置 flex:1

1
2
3
4
5
6
7
8
9
10
11
12
.container {
  display: flex;
  margin-top: 10px;
  .left {
    width: 100px;
    border: 1px solid red;
  }
  .right {
    flex: 1;
    border: 1px solid green;
  }
}

3、父元素设置display: table; 左右子元素设置dispaly: table-cell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  display: table;
  margin-top: 10px;
  width: 100%;
  .left {
    width: 100px;
    display: table-cell;
    border: 1px solid red;
  }
  .right {
    display: table-cell;
    border: 1px solid green;
  }
}

这个方法是表格布局的典型运用。说真的，我也很迷惘要不要使用表格布局，毕竟已经是上个时代的产物了，虽然已经不再用<table>的HTML结构了，但用上相应的CSS其实思路跟以前是变化不大的。

这个方法主要是利用了表格(table)的宽度必然等于其所有单元格(table-cell)加起来的总宽度，那么只要表格的宽度一定，其中一个（或几个）单元格的宽度也一定，那么另外一个未设置宽度的单元格则会默认占满剩下的宽度，即实现自适应。

4、 grid布局

1
2
3
4
5
6
7
8
9
10
11
.container {
  display: grid;
  grid-template-columns: 100px auto;
  margin-top: 10px;
  .left {
    border: 1px solid red;
  }
  .right {
    border: 1px solid green;
  }
}

5、左右子元素全部absolute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  position: relative;
  margin-top: 10px;
  .left {
    position: absolute;
    width: 100px;
    border: 1px solid red;
  }
  .right {
    position: absolute;
    left: 100px;
    right: 0;
    border: 1px solid green;
  }
}

6、左子元素absolute，右子元素设置padding-left为左子元素的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  position: relative;
  margin-top: 50px;
  .left {
    position: absolute;
    width: 100px;
    border: 1px solid red;
  }
  .right {
    box-sizing: border-box;
    padding-left: 100px;
    border: 1px solid green;
  }
}

7、 左右子元素设置浮动；右子元素使用 calc() 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.container {
  box-sizing: content-box;
  margin-top: 10px;
  &:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
  } // 清除浮动
  .left {
    /* box-sizing: border-box; */
    float: left;
    width: 100px;
    background-color: red;
    /* border: 1px solid red; */
  }
  .right {
    float: left; // float: right;
    /* box-sizing: border-box; */
    width: calc(100% - 100px);
    background-color: green;
    /* border: 1px solid green; */
  }
}

【分析】

  1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）
  2. calc() = calc(四则运算) 用于在 css 中动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  3. vw： viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,
    同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。

浏览器支持情况： 主流浏览器、IE10+
vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。

8、设置左右子元素inline-block，左右子元素中使用 calc() 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  margin-top: 10px;
  .left {
    display: inline-block;
    width: 100px;
    background-color: red;
  }
  .right {
    display: inline-block;
    width: calc(100% - 100px);
    background-color: green;
  }
}

9、左子元素设置左浮动；右子元素设置overflow: hidden(触发BFC）

1
2
3
4
5
6
7
8
9
10
11
.container {
  margin-top: 10px;
  .left {
    float: left;
    width: 100px;
    margin-right: 20px; // 形成20px的间隔
  }
  .right {
    overflow: hidden; // 通过设置overflow: hidden来触发BFC特性
  }
}

这个方法主要是应用到BFC的一个特性：

  • 浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。
  • 若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
  • 浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度。

并不是一定要在.right上用overflow: hidden;，只要能触发BFC就好了，另外在IE6上也可以触发haslayout特性（推荐用*zoom: 1;）。
由于.right的宽度是自动计算的，不需要设置任何与.left宽度相关的css，因此.left的宽度可以不固定（由内容盒子决定）。

10、使用负margin

第一步：修改页面结构，为自适应部分添加容器 .auto-container, 同时改变左右部分的位置，如下：

1
2
3
4
<section class="container">
  <div class="auto-container"><div class="right">右侧内容</div></div>
  <div class="left">左侧内容</div>
</section>

第二步：样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  .auto-container {
    float: left;
    width: 100%;
  }
  .right: {
    margin-left: 200px;
  }
  .left {
    float: left;
    margin-left: -100%;
  }
}
  1. 设置左边部分和右边部分左浮动，并为自适应部分（Right）设置宽度100%。此时的效果是这样的：
    第一步
  2. 设置左边部分左外边距为负100%，此时效果如下：但是右边部分的宽度仍然为100%，部分内容被 Left 所覆盖。
    第二步
  3. 为 Right 部分添加左边距（即 Left 部分的宽度）此时可以看到，Right 部分的内容居中显示了。
    第三步

问一问

若左边不定宽，上面的方案还适用嘛

答案是 1、2、9依然可以达到效果，凡是右子元素css依赖左子元素的宽度的场景统统不能实现左侧不定宽的自适应，而对于table布局，没有宽度时会平分table盒子的宽度，对于grid布局来说需要指定宽度自适应

写在最后

针对布局问题，可以使用 flex / table / grid 可以搞定。
如果要考虑兼容性问题，或当它们无法实现时，可以考虑 float / absolute 进行布局。
如果仍然无法搞定，可以尝试使用 float / absolute 加上 calc() 进行布局。

使用 float / absolute 可以满足需要，且它们不会出现兼容性问题，是比较合适的解决方案。

参考：

https://juejin.im/entry/594a4810da2f6000679ee138

https://www.cnblogs.com/wx1993/p/6727653.html

https://segmentfault.com/a/1190000004424442

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Lozoe，<br>毕业于大连皇家民族学院，目前就职于驼厂<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>爱生活，爱健身，爱编码<br>年轻无为，卖马为生。