jquery - 如何强制内联阻塞的 div 到相同的高度

Question

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

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

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

相关博客: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>

因此 .blog-posts = .container 和 .date-outer = .inline我上面的 html 示例...

砌体能行吗？ 或者用于制作高度相等的网格的 jquery 代码？

Answer 1

display: inline-block 样式是为其他东西而设计的，下面是它的设计目的的一个例子(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 ，可以是普通的:

<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>