【css面试题】实现2栏布局右侧自适应； 3栏布局中间自适应

2栏布局右侧自适应

基本代码

<template>
  <div class="left">www</div>
  <div class="right">rer</div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .left {
    width: 200px;
    height: 400px;
    background-color: red;
  }
  .right {
    height: 400px;
    background-color: skyblue;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

初始效果：
在这里插入图片描述

法一：flex布局

<template>
  <div class="flex">
    <!-- 我这里使用了unoCSS插件，所以 class="flex"等价于display：flex -->
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .left {
    width: 200px;
    height: 400px;
    background-color: red;
  }
  .right {
    flex: 1;
    height: 400px;
    background-color: skyblue;
  }
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

实现效果
在这里插入图片描述

法2：grid布局

1. auto

<template>
  <div class="father">
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;

    display: grid;
    grid-template-columns: var(--left-width) auto;
    .left {
      height: 400px;
      background-color: red;
    }
    .right {
      height: 400px;
      background-color: skyblue;
    }
  }
</style>

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

2. fr

  .father {
    --left-width: 200px;

    display: grid;
    grid-template-columns: var(--left-width) 1fr;//!!!!!!!
    .left {
      height: 400px;
      background-color: red;
    }
    .right {
      height: 400px;
      background-color: skyblue;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

法3: table

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son222</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 150px;

    display: table;
    width: 100%;
    height: 200px;
    border: 1px solid red;
    .son1 {
      display: table-cell;
      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      display: table-cell;
      background-color: orange;
    }
  }
</style>


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
26
27
28
29
30

法4：float

只有左侧float:left ,右侧ml

<template>
  <div class="left">wwwdiv>
  <div class="right">rerdiv>
template>

<script setup>script>
<style lang="scss" scoped>
  .left {
    --left-width: 200px;

    float: left;
    width: var(--left-width);
    height: 400px;
    background-color: red;
  }
  .right {
    height: 400px;
    margin-left: var(--left-width);
    background-color: skyblue;
  }
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2个都float:left 右侧需要计算宽度

<template>
  <div class="father">
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;
    .left {
      float: left;
      width: var(--left-width);
      height: 400px;
      background-color: red;
    }
    .right {
      float: left;
      width: calc(100% - var(--left-width));
      height: 400px;
      background-color: skyblue;
    }
  }
</style>

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
26

法5：position:absolute

左侧position:absolute+右侧ml

<template>
  <div class="father">
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;
    .left {
      position: absolute;
      width: var(--left-width);
      height: 400px;
      background-color: red;
    }
    .right {
      height: 400px;
      margin-left: var(--left-width);
      background-color: skyblue;
    }
  }
</style>

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

2个都absolute,右侧计算宽度+left:200px

<template>
  <div class="father">
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;

    position: relative;
    .left {
      position: absolute;
      width: var(--left-width);
      height: 400px;
      background-color: red;
    }
    .right {
      position: absolute;
      left: var(--left-width);
      width: calc(100% - var(--left-width));
      height: 400px;
      background-color: skyblue;
    }
  }
</style>

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
26
27
28
29

法6：position:fixed

<template>
  <div class="father">
    <div class="left">www</div>
    <div class="right">rer</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;
    .left {
      position: absolute;
      width: var(--left-width);
      height: 400px;
      background-color: red;
    }
    .right {
      height: 400px;
      margin-left: var(--left-width);
      background-color: skyblue;
    }
  }
</style>

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

3栏布局中间自适应

法1：grid布局

<template>
  <div class="father">
    <div class="son">Son111</div>
    <div class="son">Son2222</div>
    <div class="son">Son33333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    display: grid;
    grid-template-columns: 50px auto 200px;

    // grid-template-columns: 50px 1fr 200px;
    height: 400px;
    background-color: pink;
    border: 1px solid red;
    .son {
      &:nth-child(1) {
        background-color: purple;
      }
      &:nth-child(2) {
        background-color: green;
      }
      &:nth-child(3) {
        background-color: skyblue;
      }
    }
  }
</style>

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
26
27
28
29
30
31
32

效果：
在这里插入图片描述

法2：flex布局

<template>
  <div class="father">
    <div class="son">Son111</div>
    <div class="son">Son2222</div>
    <div class="son">Son33333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    display: flex;

    --son1-width: 50px;
    --son3-width: 200px;

    height: 400px;
    background-color: pink;
    border: 1px solid red;
    .son {
      &:nth-child(1) {
        width: var(--son1-width);
        background-color: purple;
      }
      &:nth-child(2) {
        flex: 1;
        background-color: green;
      }
      &:nth-child(3) {
        width: var(--son3-width);
        background-color: skyblue;
      }
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36

法3：table布局

<template>
  <div class="father">
    <div class="son">Son111</div>
    <div class="son">Son2222</div>
    <div class="son">Son33333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;

    display: table;
    width: 100%;
    height: 400px;
    border: 1px solid red;
    .son {
      &:nth-child(1) {
        display: table-cell;
        width: var(--son1-width);
        background-color: purple;
      }
      &:nth-child(2) {
        display: table-cell;
        background-color: green;
      }
      &:nth-child(3) {
        display: table-cell;
        width: var(--son3-width);
        background-color: skyblue;
      }
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36
37

法4：float

只有2边float,调换元素顺序1float:left、3float:right、2不float+ml+mr

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son3">Son33333</div>
    <div class="son2">Son2222</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;


    width: 100%;
    height: 400px;
    border: 1px solid red;
    .son1 {
      float: left;
      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      margin-right: var(--son3-width);
      margin-left: var(--son1-width);
      background-color: green;
    }
    .son3 {
      float: right;
      width: var(--son3-width);
      background-color: skyblue;
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36

3个都float:left 但是中间的要计算出宽度

<template>
  <div class="father">
    <div class="son">Son111</div>
    <div class="son">Son2222</div>
    <div class="son">Son33333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;

    width: 100%;
    height: 400px;
    border: 1px solid red;
    .son {
      &:nth-child(1) {
        float: left;
        width: var(--son1-width);
        background-color: purple;
      }
      &:nth-child(2) {
        float: left;
        width: calc(100% - var(--son1-width) - var(--son3-width));
        background-color: green;
      }
      &:nth-child(3) {
        float: left; //  float: right;也可以
        width: var(--son3-width);
        background-color: skyblue;
      }
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36
37

法5：position:absolute

只有2边absolute,调换元素顺序1absolute+2ab right:0+3mr+ml

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son2222</div>
    <div class="son3">Son33333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;

    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid red;
    .son1 {
      position: absolute;
      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      position: absolute;
      right: 0;
      width: var(--son3-width);
      background-color: skyblue;
    }
    .son3 {
      margin-right: var(--son3-width);
      margin-left: var(--son1-width);
      background-color: green;
    }
  }
</style>


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
26
27
28
29
30
31
32
33
34
35
36
37
38

3个都absolute 但是要计算中间的宽度+left

<template>
  <div class="father">
    <div class="son">son111111</div>
    <div class="son">son22222</div>
    <div class="son">son33333</div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 150px;

    // position: relative;
    .son:nth-child(1) {
      position: absolute;
      left: 0;
      width: var(--son1-width);
      background-color: pink;
    }
    .son:nth-child(2) {
      position: absolute;
      left: var(--son1-width);
      width: calc(100% - var(--son1-width) - var(--son3-width));
      background-color: red;
    }
    .son:nth-child(3) {
      position: absolute;
      right: 0;
      width: var(--son3-width);
      background-color: skyblue;
    }
  }
</style>


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
26
27
28
29
30
31
32
33
34
35
36
37
38
39

法6：position:fixed

同上

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son3">Son33333</div>
    <div class="son2">Son2222</div>
  </div>

  <p>333333333333333333</p>
  <p>asdfasdfasd</p>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;

    position: relative;
    height: 200px;
    border: 1px solid red;
    .son1 {
      position: fixed;
      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      margin-right: var(--son3-width);
      margin-left: var(--son1-width);
      background-color: green;
    }
    .son3 {
      position: fixed;
      right: 0;
      width: var(--son3-width);
      background-color: skyblue;
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son2222</div>
    <div class="son3">Son33333</div>
  </div>

  <p>333333333333333333</p>
  <p>asdfasdfasd</p>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 200px;

    position: relative;
    height: 20px;
    .son1 {
      position: fixed;
      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      position: fixed;
      width: calc(100% - var(--son1-width) - var(--son3-width));
      margin-left: var(--son1-width);
      background-color: green;
    }
    .son3 {
      position: fixed;
      right: 0;
      width: var(--son3-width);
      background-color: skyblue;
    }
  }
</style>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39

相关阅读:
某马机房预约系统 C++项目（二）完结
 OpenCL编程指南-9.3使用事件完成评测、内核中的事件、OpenCL外部的事件
 Redis基础与高可用集群架构进阶详解
 专业测试人员使用的 11 种渗透测试工具
 微信加解密流程，证书作用讲解，官方SDK使用教程
 如何用Python做量化交易策略？
Java 实体对象类转Map
基于SpringCloud微服务的Hdfs分布式大数据实现的企业网盘系统
 Python爬虫：ad广告引擎的模拟登录
 Liunx 重置MySQL用户密码
原文地址：https://blog.csdn.net/weixin_63681863/article/details/132753704

【css面试题】实现2栏布局 右侧自适应； 3栏布局 中间自适应

2栏布局 右侧自适应

法一：flex布局

法2：grid布局

1. auto

2. fr

法3: table

法4：float

只有左侧float:left ,右侧ml

2个都float:left 右侧需要计算宽度

法5：position:absolute

左侧position:absolute+右侧ml

2个都absolute,右侧计算宽度+left:200px

法6：position:fixed

3栏布局 中间自适应

法1：grid布局

法2：flex布局

法3：table布局

法4：float

只有2边float,调换元素顺序1float:left、3float:right、2不float+ml+mr

3个都float:left 但是中间的要计算出宽度

法5：position:absolute

只有2边absolute,调换元素顺序1absolute+2ab right:0+3mr+ml

3个都absolute 但是要计算中间的宽度+left

法6：position:fixed

【css面试题】实现2栏布局右侧自适应； 3栏布局中间自适应

2栏布局右侧自适应

3栏布局中间自适应