【CSS布局】左边宽度固定右边宽度自适应

最新推荐文章于 2023-08-13 09:34:53 发布

jewfer

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量166

点赞数

分类专栏：前端——CSS布局、文章标签： css css3 html

本文链接：https://blog.csdn.net/jewfer/article/details/124895597

版权

前端——CSS布局、专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了三种常见的网页布局技术：1) 使用float属性实现左右布局；2) 利用Flexbox布局，通过设置display: flex和flex属性调整元素位置；3) 结合Flex和min-width属性，确保元素宽度的响应性。这些技术对于创建响应式和灵活的网页设计至关重要。

摘要由CSDN通过智能技术生成

布局

<div id="root">
    <div class="left"></div>
    <div class="right"></div>
</div>

1. float浮动

<!-- 样式 -->
<style>
    #root {
        width: 800px;
        height: 500px;
        background-color: #ccc;
    }
    .left {
        float: left;
        width: 200px;
        height: 500px;
        background-color: pink;
    }
    .right {
        height: 500px;
        margin-left: 200px;
        background-color: #3cd;
    }
</style>

2. flex布局

父元素设置display flex
左元素设置flex-basis
右元素设置flex-grow或flex为1

<style>
    #root {
        display: flex;
        width: 800px;
        height: 500px;
        background-color: #ccc;
    }

    .left {
        flex-basis: 200px;
        height: 500px;
        background-color: pink;
    }

    .right {
        flex-grow: 1;
        height: 500px;
        background-color: #3cd;
    }
</style>

3. flex和min-width

<style>
    #root {
        display: flex;
        width: 800px;
        height: 500px;
        background-color: #ccc;
    }

    .left {
        min-width: 200px;
        height: 500px;
        background-color: pink;
    }

    .right {
        width: 100%;
        height: 500px;
        background-color: #3cd;
    }
</style>