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

最新推荐文章于 2024-04-11 00:14:29 发布

原创最新推荐文章于 2024-04-11 00:14:29 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用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;
}