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

四种左固定右自适应布局
本文介绍并演示了四种实现左固定右自适应布局的方法,包括利用浮动、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行业的一个小虾米

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值