四种简单实用的左固定右自适应简单布局

四种左固定右自适应布局

最新推荐文章于 2022-07-02 17:10:57 发布

Daniel.li

最新推荐文章于 2022-07-02 17:10:57 发布

阅读量733

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端HTML

本文链接：https://blog.youkuaiyun.com/weixin_43683430/article/details/84026692

本文介绍并演示了四种实现左固定右自适应布局的方法，包括利用浮动、Flex弹性布局、定位及calc方法，适合网页设计者快速掌握响应式布局技巧。

四种简单实用的左固定右自适应简单布局

第一种：
利用浮动
布局：
a、b两个盒子 a为左边盒子 b为右边盒子

a设置固定宽度左浮动
b设置左外边距=a的宽度

<style>
    .a{
        width: 200px;
        height: 200px;
        background:red;
        float: left;
    }
    .b{height: 200px;
        background: #449997;
        margin-left: 200px;
    }
</style>
<body>
<div class="big">
    <div class="a"></div>
    <div class="b"></div>
</div>
</body>

第二种：
flex弹性布局
布局：
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
该方法我不太理解但是确实特别好用
大盒子设置display：flex
a 设置固定宽度
b设置flex：1
即可实现

<style>
    .big{
        display: flex;
    }
    .a{
        width: 200px;
        height: 200px;
        background:red;
        float: left;
    }
    .b{height: 200px;
        background: #449997;
        flex:1;
    }
</style>
<body>
<div class="big">
    <div class="a"></div>
    <div class="b"></div>
</div>
</body>

第三种
运用定位
布局：
a、b两个盒子 a为左边盒子 b为右边盒子
a设置固定宽度绝对定位
b设置左外边距=a的宽度

<style>
    .a{
        width: 200px;
        height: 200px;
        background:red;
        position: absolute;}
    .b{
        height: 200px;
        background: #449997;
        margin-left: 200px;
    }
</style>
<body>
<div class="big">
    <div class="a"></div>
    <div class="b"></div>
</div>
</body>

第四种
calc方法
布局：
a、b两个盒子 a为左边盒子 b为右边盒子
a设置固定宽度左浮动
b设置宽度=calc（100% - a的宽度）右浮动
即可实现左固定右自适应

<style>
    .a{
        width: 200px;
        height: 200px;
        background:red;
        float: left;
    }
    .b{height: 200px;
        background: #449997;
        width:calc(100% - 200px);
        float: right;
    }
</style>
<body>
<div class="big">
    <div class="a"></div>
    <div class="b"></div>
</div>
</body>

初入计算机IT行业的一个小虾米