html - 大小不等的 Div 无法相对于顶部居中

<分区>

所以我有两个 div 元素，一个比另一个小。我用一个带有“宽度:80%；边距:0 自动；文本对齐:居中；”的包装类“居中”它们以及他们的每个单独的类“宽度:30%；显示:内联 block ；”。它们居中；但是，其中一个低于另一个，因此如果有意义的话，它不会相对于第一个 div 居中。

.wrapperPost{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.sidePost{  
    width: 30%;
    display: inline-block;
}

<div class="wrapperPost">
    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta, lectus sapien porttitor nequeeget 
        luctus nunc tortor pharetra lectus. Nunc eget sem et elit vestibulum 
        pharetra.
        </p>
    </div>

    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta</p>
    </div>
</div>

到目前为止，唯一的错误是第二个 div 元素低于其左侧的元素。我希望他们在顶部排队。

编辑:这是一个 JSFiddle https://jsfiddle.net/JohnstonLiu/75wystL9/

最佳答案

您只需将 vertical-align: top 添加到 sidePost 类。或者使用像 Flexbox 这样的现代 CSS 布局来构建。 See example here

关于html - 大小不等的 Div 无法相对于顶部居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56910613/