Html 下面的部分不包括'；Don’不要直接走到上面那一个的下面

我有这三个部分，下面有三个部分，我希望下面的部分跟在上面的部分后面。例如，在这个代码笔中，下面的第二部分并不直接位于上面的第二部分之下，因为上面的第一部分稍长

codepen.io/anon/pen/apEQRE

---

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

不改变HTML结构不容易。您可以将元素浮动到左侧，而不是将其显示为

内联块

，但是，左下角的元素也会有同样的问题。您可以将它们显示为

flex

，但这会导致文本格式出现问题

我建议将各部分分为三个定义的列：

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

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

我已经创造了展示这一点

请注意，您的示例中有相同的

部分

，但在实际应用中，您需要重新排列这些部分，以便它们从左到右阅读，而不是从上到下阅读

希望这有帮助

.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;
}