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

Posted 2023-03-05

【中文标题】如何强制内联块 div 到相同的高度

【英文标题】：How to force inline-blocked divs to same height

【发布时间】：2014-06-16 03:46:07

【问题描述】：

我有像网格一样的内联阻止 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 代码？

【问题讨论】：

如果 display: inline-block 确实是您所需要的 - 只需禁用文本换行以保持高度不变。或者使用 min-height （可能在嵌套表格内容级别），或者您可以尝试为 inline-block 元素指定权限。

快速提示 - 您可以在 CSS 中编写 .container div

，而不是为所有这些子 div 定义 class="inline"

@user3455395 : min-height 似乎是一个不错的选择...你能解释一下文本换行吗？我不习惯这样做... lukeocom：为什么它更好？我去睡觉了，明天我会看答案...非常感谢您的回答！

当布局空间不足时，

@Igor Laszlo min-height 不会让您免于不必要地包装表格单元格元素。

@user3455395 : min-height 是可能的，但这不是一个很好的解决方案，因为它应该在不同的响应点进行更改（@media only screen and...）

【参考方案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>
 <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>

【讨论】：

好的，就像@Notulysses 一样，你说我也需要创建行...我会检查我的 Blogger 模板是否能够在这部分中执行此操作，或者是否可以由 xml 生成，在这种情况下我将无法更改它...现在是凌晨 3 点 30 分，我会在明天告诉您它是否有效以及如何...非常感谢！

inline-block 旨在充分利用内联和块显示。它不保证相同的高度。表单元格保证拥有它。还可以尝试调整布局的大小 - 使其非常窄，看看会发生什么。

所以，我检查了博客模板，但我不知道如何编写代码以在每 3 个内联 div 之后生成行。我想我应该在 xml <loop> 中写一个<b:if> 条件，我做不到...

【参考方案2】：

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

将 .my-inline-block-class 更改为 jQuery 选择器，它将选择您的 inline-block 元素。

(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);

【讨论】：

非常感谢！我会试试的，我会回来的……不是现在，但我想一周后……再次感谢！

这非常适合我。过去我自己也写过一个类似的函数，但比它需要的要复杂得多。我要添加的一件事是 $(window).load(autoheight);比 $ls.on('load', autoheight); 更好，或者至少比它更好。用于拾取所有加载的图像。

【参考方案3】：

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

它需要四个 .js 文件：

jquery.js 下划线.js html5shiv.js equal-heights-responsive.js

要启动插件：

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