两列或多列等高布局实现

最新推荐文章于 2022-08-31 07:15:56 发布

fb_01

最新推荐文章于 2022-08-31 07:15:56 发布

阅读量2.6k

点赞数

文章标签：布局

本文链接：https://blog.youkuaiyun.com/fb_01/article/details/51016985

版权

本文介绍了三种实现两列或多列等高布局的方法：1) 使用传统的table布局；2) 利用正负内外边距技巧；3) 通过CSS伪类和Flexbox弹性布局来达成目标。详细讲解了每种方法的实现步骤和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用table布局，这里不多说。。。

2、正负内外边距实现

<div class="mian">
        <div class="left">左列</div>
        <div class="middle">中列</div>
        <div class="right">右列</div>
</div>
.mian {
    width: 1360px;
    overflow: hidden;
}
.mian .left,
.mian .right,
.mian .middle {
    float: left;
    padding-bottom: 9000px;
    margin-bottom: -9000px;
}
.mian .left {
    width: 180px;
    height: 280px;
    background-color: red;
}
.mian .middle {
    margin-left: 10px;
    background-color: blue;
}
.mian .right {
    margin-left: 10px;
    background-color: silver;
}

3、伪类方法实现和Flexbox实现，参考点击打开链接