如何对齐具有不同高度的 div？答案

【问题标题】：How Do I Align Divs With Different Heights?如何对齐具有不同高度的 div？
【发布时间】：2016-08-27 23:30:52
【问题描述】：

我无法对齐 div。我的 div 没有设置高度，因此它们采用内部文本的高度。

这是它现在的样子。

请注意，王子帖子右对齐，并且在该帖子下方是另一个帖子在其下方对齐。我似乎无法弄清楚这是怎么回事。

这是我的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。

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

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

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

【讨论】：

这实际上将它们全部包裹在一起。不是我想要的
你能给我看看它应该是什么样子的图片吗
这就是它的样子。 cdn.ratedrnb.com/2016/05/flex.png@Dhaval Chheda
试试这个 CSS
找出问题所在，我需要清除此部分上方的浮动。