左边div固定宽度,右边div自适应撑满剩下的宽度

1. 使用float

<div class="use-float">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
    .left {
        width: 100px;
        float: left;
    }

    .right {
        overflow: hidden;
    }
</style>

2. 使用 flex

<div class="use-flex">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
    .use-flex {
        display: flex;
    }

    .left {
        flex: none;
        width: 100px;
    }

    .right {
        flex: 1;
    }
</style>

猜你喜欢

转载自blog.csdn.net/wulala_hei/article/details/80445700
今日推荐