如何强制内联块 div 达到相同高度

我有像网格一样的内联块 div。我想强迫所有在同一行的人达到相同的高度，他们应该得到最长的div的高度。

CSS、jquery 或简单的 javascript 解决方案会很棒。

现在这很常见......我去看了Masonry，但据我对示例图形的理解，它并没有像这样对齐......我对吗？

有问题的博客：http://ildesign-blogger-demo-1.blogspot.fr/ http://ildesign-blogger-demo-1.blogspot.fr/

HTML：

<div class="container>
    <div class="inline">text</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
    <div class="inline">whatever</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
</div> 

CSS：

.container {width: 100%; display:block;} 
.inline {display: inline-block; width: 28%; margin: 1%; padding: 1%;}

所以，每行中有三个内联 div，我希望这些行对齐，因此内联 div 应该具有与行中最长的 div 相同的高度......

编辑：我重新编辑了这篇文章，添加了 html 是由 Blogger xml 模板生成的。所以，如果你建议将每三个内联 div 添加到一个像一行的 div 中，我不知道该怎么做......原始的 xml 代码：

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <div class='date-outer'>
      <h2 class='date-header'><span><data:post.timestamp/></span></h2>
      <div class='date-posts'>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'><data:adCode/></div>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </div>
    </div>
  </b:loop>
<data:adEnd/>
</div>

So the .博客文章 = 。容器和.date-outer = .inline在我上面的 html 示例中...

砌体可以吗？ 或者用于制作等高网格的 jquery 代码？

display: inline-blockstyle 是为其他东西而设计的，这里有一个它的设计目的的例子（inline是一个单独的显示模式，所以我建议将您的类重命名为inline-block无论你要采取哪种方式 - 现在我使用你的命名）：

使用 100 个单元格创建此内容：

<div class='block'>
    <div class="inline" style='width: 50px; height: 50px;'>1</div>
    <div class="inline" style='width: 50px; height: 50px;'>2</div>
    <div class="inline" style='width: 50px; height: 50px;'>3</div>
..
    <div class="inline" style='width: 50px; height: 50px;'>100</div>
</div> 

然后调整窗口大小并观察框如何布局。

您需要一张桌子，可以是普通的桌子：

<table>
 <tr>
  <td>
   <div>First Col Content</div>
  </td>
  <td>
   <div>Second Col Content</div>
  </td>
  <td>
   <div>Third Col Content</div>
  </td>
 </tr>
</table>

或者 CSS 的：

<div style='display: table;'>
 <div style='display: table-row;'>
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>First Col Content</div>
  </div >
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>Second Col Content</div>
  </div >
  <div style='display: table-cell; width: 34%; min-width: 34%;'>
   <div>Third Col Content</div>
  </div>
 </div>
</div>