右边宽度固定,左边自适应-移动两栏自适应-加margin方式

本文详细介绍了使用HTML和CSS实现左右双栏布局的方法,左栏宽度固定,右栏宽度自适应,同时保持两栏高度100%。适用于网页设计中常见的固定侧边栏加自适应内容区场景。

第一种:

<!--主体-->
<div class="my-content">
    <div class="leftBox">

    </div>
    <div class="rightBox">

    </div>
</div>


.my-content {
    position: absolute;
    left: 0px;
    top: 44px;
    bottom: 50px;
    width: 100%;
    padding: 0;
}

//左边宽度固定,右边宽度适应
//高度都是100%
.my-content .leftBox {
    float: left;
    width: 80px;  
    height: 100%;
    background-color: pink;
}

//宽度不去定义
.my-content .rightBox {
    margin-left: 80px;
    height: 100%;
    background-color: hotpink;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值