Question

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

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

现在这是非常普遍的事情......我去看了一下砌体，但就我对样本图形的理解而言，它并没有像这样对齐......我是对的吗？

相关博客：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是一种单独的调度模式，因此我建议您将类重命名为{{1}无论你要采取哪种方式 - 现在我都用你的名字了）：

使用100个单元格创建：

inline-block

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

你需要的是一张桌子，或者是一张桌子：

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

或CSS one：

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

Answer 2

非常简单的jQuery插件，它还包括在更改窗口大小时自动调整元素大小。

将 .my-inline-block-class 更改为将选择内联块元素的jQuery选择器。

(function($, window) {
    var $ls;
    function autoheight() {
        var max = 0;
        $ls.each(function() {
            $t = $(this);
            $t.css('height','');
            max = Math.max(max, $t.height());
        });
        $ls.height(max);
    }
    $(function() {
        $ls = $('.my-inline-block-class'); // the inline-block selector
        autoheight(); // first time
        $ls.on('load', autoheight); // when images in content finish loading
        $(window).load(autoheight); // when all content finishes loading
        $(window).resize(autoheight); // when the window size changes
    });
})(jQuery, window);

Answer 3

我正在寻找一个jquery插件，它使得div与最高div的高度相等。网络上有很多，但并非所有这些都有效。我找到了一个完美的作品：https://github.com/johnnyfaldo/equal-heights-responsive

它需要四个.js文件：

jquery.js
underscore.js
html5shiv.js
相等的高度-responsive.js

启动插件：

<script type="text/javascript">
    $(document).ready(function() {
        $('.elements-to-equalise').equalHeights({
            responsive:true,
            animate:true,
            animateSpeed:500
        });
    });
</script>

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

3 个答案: