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

已于 2024-04-05 19:32:28 修改
阅读量344 收藏
点赞数
分类专栏： 面试题CSS 文章标签： css 前端 javascript
于 2023-09-14 19:51:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/132753704
版权

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>

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

法一：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>

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

法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>

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;
    }
  }

法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>

法4：float

只有左侧float:left ,右侧ml

<template>
  <div class="left">www</div>
  <div class="right">rer</div>
</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>

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>

法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>

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>

右侧absolute + top:0 + left:200px + 宽度计算出来

法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>

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>

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

法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>

法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>

法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>

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>

法5：position:absolute

只有2边absolute,1absolute+2mr+ml+3ab right:0

<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>

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>

法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>


<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>

法7：

圣杯布局

    <div class="father">
      <div class="middle">middele</div>
      <div class="left">left</div>
      <div class="right">rer</div>
    </div>
  </body>

  <style lang="scss">
    .father {
      --left-width: 200px;
      --right-width: 100px;
      padding-left: var(--left-width);
      padding-right: var(--right-width);
      border: 1px solid red;
      width: 800px;

      .left {
        position: relative;
        left: calc(var(--left-width) * -1);

        float: left;
        margin-left: -100%;

        width: var(--left-width);
        height: 400px;
        background-color: red;
        overflow: hidden;
      }

      .middle {
        float: left;
        width: 100%;
        background-color: tomato;
      }
      .right {
        position: relative;
        left: var(--right-width);

        float: right;
        margin-left: calc(var(--right-width) * -1);

        width: var(--right-width);
        height: 400px;
        background-color: skyblue;
      }
    }
  </style>

法8：双飞翼布局：浮动和外边距负值

中间盒子放开头,并且要设置box-sizing:border-box;，设置宽度100%，float:left，里面的子盒子设置pl pr为对应方向的值
左右2盒子都设置float:left，和各自的宽度;左侧盒子设置 margin-left: -100%;,右侧盒子设置margin-left: 自身的宽度;
在这里插入图片描述

   <body>
    <div class="father">
      <div class="middle">middele</div>

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

      <div class="right">right</div>
    </div>
  </body>

  <style lang="scss">
    .father {
      --left-width: 100px;
      --right-width: 200px;

      border: 1px solid red;
      width: 100%;

      .left {
        float: left;
        margin-left: -100%;

        width: var(--left-width);
        height: 400px;
        background-color: red;
      }

      .middle {
        box-sizing: border-box; /* 这个不可以去掉 */
        float: left;
        width: 100%;
        background: yellow;
        padding-left: var(--left-width);
        padding-right: var(--right-width);
        background-color: tomato;
        height: 400px;
      }

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

法9

双飞翼布局：浮动和外边距负值
中间盒子放开头,并且要用一个父盒子包裹它，这个父盒子设置宽度100%，float:left，里面的子盒子设置ml mr为对应方向的值
左右2盒子都设置float:left，和各自的宽度;左侧盒子设置 margin-left: -100%;,右侧盒子设置margin-left: 自身的宽度;
在这里插入图片描述

  <body>
    <div class="father">
      <div class="wrap"><div class="middle">middele</div></div>

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

      <div class="right">right</div>
    </div>
  </body>

  <style lang="scss">
    .father {
      --left-width: 100px;
      --right-width: 200px;

      border: 1px solid red;
      width: 100%;
      /* overflow: hidden; */
      .left {
        float: left;
        margin-left: -100%;

        width: var(--left-width);
        height: 400px;
        background-color: red;
      }

      .wrap {
        float: left;
        width: 100%;
        background: yellow;
      }
      .middle {
        margin-left: var(--left-width);
        margin-right: var(--right-width);
        background-color: tomato;
        height: 400px;
      }

      .right {
        float: left;
        margin-left: -200px;
        width: var(--right-width);
        height: 400px;
        background-color: skyblue;
      }
    }
  </style>
珊珊而川
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css两栏布局左右联动,左右两栏布局右侧自适应+左右拖动改变两栏宽度
weixin_39853843的博客
08-03 750
今天一下午的学习成果，分享一下，欢迎高手指教。首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。复制代码代码如下:左右两栏拖动改变宽度左侧内容右侧内容css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。复制代码代码如下:div,body,html{margin:0; padding:0; width:...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的，具体实现如下，感兴趣的朋友可以参考下哈
【CSS面试】两栏布局和三列布局
qq_40992225的博客
08-25 550
结果如下：看着好像是得行，但是实际上这个right盒子是100%，也就是right被覆盖在left之下，所以我们还需要为right设置一个margin-left结果如上。左盒子绝对定位，右盒子用 margin-left:300px或者给左，右盒子都用绝对定位。flex: 1可以让其填充剩余的空间，以达到拉伸的效果此时由于宽度太大，right将会被挤下来。......
vue实现左右两栏布局宽度可拖拽
最新发布
weixin_42634040的博客
04-28 582
项目里需要左右两栏布局根据内容多少可以用户自己拖拽宽度的需求。
css实现两栏布局，左侧固定宽，右侧自适应的7中方法
yzm521314的博客
07-08 182
css实现两栏布局，左侧固定宽，右侧自适应的7中方法 1、利用 calc 计算宽度的方法 css代码: .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100px);} dom结构: <div class="box" id="box1"> <div cla
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。 1...
左定宽度右自适应宽度并且等高布局实现代码
12-13
在CSS布局中，实现"左定宽度右自适应宽度并且等高布局"是一个常见的需求，尤其是在构建网页布局时。这个需求通常涉及到固定宽度的侧边栏（左侧栏）和自适应宽度的内容区域（右侧栏）。在给定的面试题中，还有等高...
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
351道前端工程师HTML、CSS面试题和训练题（含答案）.docx
04-09
本文档提供了多种HTML和CSS面试题和训练题，涵盖了HTML和CSS的多个方面，包括布局、样式、交互等。 一、HTML面试题 1. HTML结构 tags的使用 * 什么是HTML结构 tags？如何使用？ * HTML结构 tags有什么作用？ 2. ...
前端大厂面试思维导图-css面试
03-31
css常见面试题目，自适应两栏布局避免垂直方向margin合并BFC定义，布局规则，防止高度坍塌，自适应两栏布局，利用css构建三角形（正三角，倒三角，左/右三角），响应式布局的方式，几种，媒体查询原理，flex布局，父...
右边自适应 左右布局_左右两栏布局右侧自适应+左右拖动改变两栏宽度首
weixin_34055902的博客
01-14 533
div css自适应宽度，两栏，右侧定宽，左侧自适应左右两栏高度不定，要怎么实现？如何布局左不动右边自适应的两列布局左侧固定宽，右侧自适应屏幕宽； 左右两列，等高布局； 左右两列要夜影驱动编程小编今天和大家分享有最小高度，例如：200px;(当内容超出200时，会自动以等高的方式增高) 要夜影驱动编程小编今天和大家分享不用JS或CSS行为实现； 仔细分析试题要夜影驱动编程小编今天和大家分享，要达到...
CSS布局：中栏固定宽度,左右两栏宽度自适应
wenlyli的专栏
09-05 788
CSS布局：中栏固定宽度,左右两栏宽度相等同时自适应宽度 *{ margin:0; padding:0; } body{ font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px; } #header,#footer{ clear:both; padding:10px; text-align:c
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
接着奏乐接着舞的博客
12-28 2912
1. 使用定位在左侧菜单栏右侧写一个不可见div，鼠标经过鼠标指针样式变换 2. 监听事件：鼠标按下、抬起、移动，需要一个变量，来记录当前是按下还是抬起，初始为false，按下时为true，抬起时为false，如果是true的情况可以移动。 3.记录鼠标偏移值e.screenX，借此控制菜单栏宽度，使用min、maxwidth控制最小或最大宽度 4.性能优化，采用节流或防抖
用CSS实现：左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变
JiangLittleBai的博客
04-10 615
HTML 代码&lt;div class="zuo"&gt;左边 &lt;/div&gt; &lt;div class="zhong"&gt;中间&lt;/div&gt; &lt;div class="you"&gt;右边&lt;/div&gt;CSS 代码1.zuo, .you{ width:200px;
两栏布局右侧自适应+左右拖动改变两栏宽度
萌萌的It人 www.itmmd.com
06-18 3767
今天一下午的学习成果，分享一下，欢迎高手指教。 首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 html> 3 head>
300道HTML、CSS习题及面试题含答案.pdf
07-13
这份资料特别关注于实战应用，提供了一种解决实际问题的方法，如设计一个具有自适应宽度且具备左右两栏固定宽度、中间栏优先加载功能的页面，并考虑了换肤需求。具体来说，该习题涉及到了HTML中的`<div>`元素布局和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值