Css Block

多列等高

用 margin 实现

将子元素的 margin-bottom 设为与 padding-bottom 等值的（远大于父层高度）的负值。


我在左侧

我在右侧

我在右侧

<div class="father">
    <div class="child1">
        <p>我在左侧</p>
    </div>
    <div class="child2">
        <p>我在右侧</p>
        <p>我在右侧</p>
    </div>
</div>
1
2
3
4
5
6
7
8
9
.father {
    overflow: hidden;
}
.father .child1, .father .child2 {
    width: 50%;
    float: left;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}
.father .child1 {
    background-color: #ff4f4f;
}
.father .child2 {
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

用 table 实现

借鉴 table 高度的自适应性，需要为子元素设置一个很大的宽度来保证每个 td 平分 table 的宽度。


我在左侧

我在右侧

我在右侧

<div class="father">
    <div class="child1">
        <p>我在左侧</p>
    </div>
    <div class="child2">
        <p>我在右侧</p>
        <p>我在右侧</p>
    </div>
</div>
1
2
3
4
5
6
7
8
9
.father {
    display: table;
}
.father .child1, .father .child2 {
    display: table-cell;
    width: 99999px;
}
.father .child1 {
    background-color: #ff4f4f;
}
.father .child2 {
    background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

← Flex 结合 Auto →