HTML中实现两栏布局的方法

效果图:

两栏布局

一、float + margin-left(浮动):

// 左边盒子设置左浮动,右边盒子设置左外边距为200px
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    margin-left: 200px;
    height: 100%;
    background-color: darkcyan;
}

二、float + calc(浮动):

// 左边盒子设置左浮动,右边盒子也设置左浮动,使用calc减去左边盒子的宽度
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: darkcyan;
}

三、flex + flex-shrink + flex(弹性盒):

// 父盒子为弹性盒,左边盒子设置不被压缩,右边盒子占据剩余区域
.wrapper {
    height: 100%;
    display: flex;
}
.left {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    flex: 1;
    height: 100%;
    background-color: darkcyan;
}

四、BFC(overflow):

// 左边盒子设置左浮动,右边盒子设置overflow: hidden
.left {
    width: 200px;
    height: 100%;
    float: left;
    background-color: salmon;
}
.right {
    overflow: hidden;
    background-color: darkcyan;
    height: 100%;
}

五、position(子绝父相):

// 父盒子为相对定位,左边盒子设置绝对定位,右边盒子设置左外边距为200px
.wrapper {
    height: 100%;
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    margin-left: 200px;
    height: 100%;
    background-color: darkcyan;
}

六、position(子绝父相):

// 父盒子为相对定位,左边盒子设置宽度,右边盒子设置绝对定,位然后设置left为200px,其他为0
.wrapper {
    height: 100%;
    position: relative;
}
.left {
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: darkcyan;
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:HTML中实现两栏布局的方法

文章字数:372

本文作者:Spicy boy

发布时间:2021-03-02, 10:16:48

最后更新:2021-03-31, 10:40:13

原始链接:http://www.spicyboy.cn/2021/03/02/HTML%E4%B8%AD%E5%AE%9E%E7%8E%B0%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80%E7%9A%84%E6%96%B9%E6%B3%95/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏