html - 如何将不同高度的 div 对齐？

Question

我在对齐 div 时遇到问题。我的 div 没有设置高度，因此它们采用内部文本的高度。

这是它现在的样子的照片。

请注意 prince 帖子右对齐，并且在该帖子下方还有另一个帖子在其下方对齐。我似乎无法弄清楚这里出了什么问题。

这是我的 html:

<div class="row" style="padding:30px 10px 30px 20px; margin:auto;  display:block;">

 <div class="large-12 column large-columnz">
 <a href="post url"><img src=""></a>
 <div class="row column">The Title
 Article Excerpt</div>
</div>
</div>
</div>

这是CSS:

.large-columnz {  
    max-width:560px;
    margin-bottom:10px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
 }

我正在使用 Foundation用于设计我的网站以及我自己的合并 CSS 的响应式框架。

谁能告诉我我做错了什么导致最后两个帖子不对齐。

Answer 1

在包裹所有 div 的父 div 中(如果没有包裹 div 则添加 1 )然后添加 display: flex;在父 div 样式中，所有子容器将具有相同的高度..