Question

我只是不明白为什么第一个孩子在父母的“边界”之后有空白区域。我的错是什么？

.content {
    font-size: 22px;
}

.content__row {
    height: 150px;
}

.content__column_half {
    width: 49%;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dotted #000000;
    background-color: graytext;
}

https://jsfiddle.net/x8ant22n/

Answer 1

将此添加到.content__column_half：

display: block;
float: left;
margin: 0 .5%;

并删除：display: inline-block。

小提琴：https://jsfiddle.net/x8ant22n/2/

Flex替代方案：

将display: flex添加到.content__row并将flex-grow: 1添加到.content__column_half`。

删除display: inline-block

小提琴：https://jsfiddle.net/x8ant22n/3/

父母提供高度的第一个孩子之前的空白区域

1 个答案: