Question

我有这三个部分，它们下面有三个部分，我希望下面的部分跟随它们正上方的部分。例如，在此codepen中，下面的第二部分并不直接位于上面第二部分的下方，因为上面的第一部分要长一点。

codepen.io/anon/pen/apEQRE

有没有办法解决这个问题？

Answer 1

不改变HTML结构不容易。您可以将元素浮动到左侧而不是将它们显示为inline-block，但是，左下角的元素会出现同样的问题。您可以将它们显示为flex，但这会导致文本格式化方式出现问题。

我建议将这些部分分为三个定义的栏目：

<div class="column">
    <section>
        <h2>Title</h2>
        <p>Text</p>
        <p>Text</p>
    </section>

    <section>
        <h2>Title</h2>
        <p>Text</p>             
    </section>
</div>

然后你需要稍微更改你的CSS来覆盖这个：

.column {
    float: left;
    width: 33.33%;
}

section {
    text-align: center;
    background-color: white;
    width: 90%;
    padding: 15px;
    border: 1px solid #007d87;
    margin-bottom: 5px;
    opacity: 0.8;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

我创建了a new pen来展示这一点。

请注意，您的示例具有相同的sections，但在实际应用中，您需要重新排序这些部分，以便从左到右，而不是从上到下阅读。

希望这有帮助！

下面的部分并不直接位于上面的部分之下

1 个答案: