两个盒子,左边固定宽,右边自适应,你能想到几种方法?

·  阅读 4429
两个盒子,左边固定宽,右边自适应,你能想到几种方法?

大家好,我是Ned,改了个名字,但是我还是我,是乃德也是Ned~~~

前言

最近不是又要秋招了吗? 有的小伙伴就说了,你的面试专栏可是鸽了有一段时间了奥,再不更新我就取关拉!

这这这,我这不来更新了吗,三个招聘季节,更新了三篇,合情,合理~

再也不画饼了

今天带来的是一个场景题:

  • 对于两个盒子,实现左边固定宽度,右边自适应

当然,你可能很快的就用擅长的方法做出来了,那就再看看其他方法吧

毕竟当你一口气说出三四个的时候,面试官还是会对你有点好感的。

技多不压身嘛~

好了,offer收割机们,我们上代码

实现

公共的盒子部分

这就是那两个我们需要去操作的盒子

<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

方法一:float和BFC实现

不知道bfc是什么的可以去看我之前写过的盒模型那个文章,总之它就是使得内部元素不受外界因素影响

<style>
.content {
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
}
.left {
    width: 200px;
    height: 100%;
    background: red;
    float: left;
}
.right {
    height: 100%;
    background: pink;
    overflow: hidden;
}
</style>
复制代码

方法二:absolute定位和margin值实现

看这个布局的时候可以想一下,圣杯双飞翼布局哦~

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        position: absolute;
    }
    .right {
        height: 100%;
        background: pink;
        margin-left: 200px;
    }
</style>
复制代码

方法三:calc(100% - 固定内容的宽度) 用calc函数动态计算数值

就是通过clac函数计算动态的变换宽度

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        float: left;
    }
    .right {
        height: 100%;
        background: pink;
        float: left;
        width: calc(100% - 200px);
    }
</style>
复制代码

方法四:flex布局轻松搞定

比较推荐这个,他思考简单,写起来快,建议首选(说),然而会引出一个事情,就是你知道flex:1是什么吗?

不知道的还不快去查

<style>
    .content {
        border: 1px solid #000;
        height: 800px;
        padding: 20px;
        display: flex;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
    }
    .right {
        height: 100%;
        background: pink;
        flex: 1;
    }
</style>
复制代码

方法五:使用table和table-cell实现

 <style>
     .content {
         border: 1px solid #000;
         width: 100%;
         height: 800px;
         display: table;
     }
     .left {
         width: 200px;
         height: 100%;
         background: red;
         display: table-cell;
     }
     .right {
         height: 100%;
         background: pink;
         display: table-cell;
     }
</style>
复制代码

方法六:使用inline-block携手calc函数设置宽度

啊,我承认,这个有点强行,但是,他实现了欸,只要熟悉calc函数,方法六跟方法二应该是很容易想到的思路。

<style>
    .content {
        border: 1px solid #000;
        width: 100%;
        height: 800px;
        font-size: 0;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        display: inline-block;
        vertical-align: top;
    }
    .right {
        height: 100%;
        background: pink;
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 200px);
        font-size: 16px;
    }
</style>
复制代码

面试专栏往期内容

对于宏任务和微任务,你知道多少?

【基础巩固📔】- 带你搞懂CSS盒模型

结束啦

必备的css场景问题,也是基础中的基础哦,所以快来学习吧!

梳理好每一个知识点,稳扎稳打,才不会被面试官问倒😰~

如果文章有误欢迎在评论区指出,感谢指正🔔

这是我面试专栏的第三篇文章,后续会陆陆续续继续整理的,欢迎大家关注📢

👉专栏地址:Ned的面试加油站👈

如果您觉得以上的内容还不错,不妨点个赞支持一下哦~~😇

我们下期再见👋

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改