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

是乃德也是Ned

发布于 2022-12-17 16:39:43

3420

发布于 2022-12-17 16:39:43

文章被收录于专栏：前端成长日记

前言

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

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

~~再也不画饼了~~

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

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

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

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

技多不压身嘛~

好了，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>