解决左边宽度固定，右边宽度随浏览器自适应的3种方案

最新推荐文章于 2024-07-26 13:50:11 发布

杏子姐_1024

最新推荐文章于 2024-07-26 13:50:11 发布

阅读量6.2k

点赞数 7

分类专栏： # JavaScript 应用

本文链接：https://blog.csdn.net/weixin_44135121/article/details/97622388

版权

JavaScript 应用专栏收录该内容

21 篇文章 2 订阅

订阅专栏

解决左边宽度固定，右边宽度随浏览器自适应的3种方案

前言
一、使用 flex 布局
三、使用 flex + min-width
二、使用 float 浮动
四、总结

前言

在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，实现左边宽度固定，右边宽度随浏览器的变化而变化，在这个问题上衍生出来的还有一种场景，明明设置了固定宽度，却出现变形的现象，今天就给大家分享一下解决方案。

一、使用 flex 布局

思路：

父元素设置 display:flex；
左边元素给固定的 flex-basis 属性值；
右边元素设置 flex-grow 为 1 或者 flex 为 1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    .box{
        height: 100px;
        display: flex;
    }
    .left{
        flex-basis: 100px;
        background-color: silver;
    }
    .right{
        flex-grow: 1;
        background-color: pink;
    }
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

三、使用 flex + min-width

思路：

父元素设置 display:flex；
左边元素设置最小宽度 min-width 属性值；
右边元素可设置 flex-grow 为 1 或者 flex 为 1 或者宽度 100%，填充剩余空间。（这里注意只有左边设置最小宽度的时候，右边才能使用100%）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    .box{
        display: flex;
    }
    .left{
        min-width: 100px;
        height:100px;
        background-color: silver;
    }
    .right{
        width: 100%;
        height:100px;
        background-color: pink;
    }
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

二、使用 float 浮动

思路：

左边元素浮动，设置固定的宽度；
右边元素设置 margin-left 距离为左边元素宽度；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    .left{
        float: left;
        width: 100px;
        height:100px;
        background-color: silver;
    }
    .right{
        margin-left:100px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

四、总结

实现左边固定，右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。
使用 float 时，左边元素设置固定宽度，右边元素设置相应的 margin-left 值。
使用 flex 时，如果左边元素宽度使用 flex-basis 属性，右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性，右边元素除了可以设置 flex-grow 为 1，或者 flex 为 1，还可以设置宽度 100%。