文章标签的动态高度答案

【问题标题】：dynamical height of article tag文章标签的动态高度
【发布时间】：2015-01-15 15:59:05
【问题描述】：

无法动态调整内容块，尤其是它们的高度。有代码结构（不要介意错过任何结束标签等，它们在运行版本中）：

<div class="wrapper">
  <article>
    <div class="inner-wrap">
      <div class="front_panel">
        <a>some content(might involve image)</a>
      </div>
      <div class="back_panel">
        <a>some more content</a>
      </div>
    </div>
    <div class="outer-wrap">
      <a>some more content</a>
      <a>some bottom content</a>
    </div>
  </article>
  .....
  <!--more articles here-->
  <article>..</article>
</div>

所以问题，有时某些内容太长以至于超出了我的默认高度 265 像素。我想让它更具动态性并使其高度适应，但是由于所有文章都需要根据设计指南对齐，因此所有文章的高度需要相同，换句话说，如果我将高度从 265px 动态调整为 280px一篇文章它应该与所有其他文章的高度相同。我在考虑一些 js 检查，但由于有很多事件（过滤器、搜索等，一切都是异步的，所以用 js 涵盖了很多）。

关于 CSS 解决方案的任何想法？研究了 flexbox CSS 解决方案，但它似乎并不能很好地适应文章中如此多的内容层。任何建议、可能的解决方案或链接都会有很大帮助。谢谢转发！

【问题讨论】：

据我所知，以一致的 x 浏览器方式实现这一目标的唯一方法是使用 javascript
不兼容旧浏览器的CSS解决方案也可以
@MindaugasJačionis 您找到解决方案了吗？
我决定不浪费时间，只是将高度增加了 5 像素，因为这足以解决文章元素中更多内容的任何可能问题。

标签： html css row-height

【解决方案1】：

Here你有一篇关于这个主题的好文章，用不同的方法。

我喜欢一种真正的布局方法：

HTML：

<div id="one-true" class="group">
  <div class="col">
    <h3>I am listed first in source order.</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
      amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>

CSS：

#one-true { overflow: hidden; }
#one-true .col {
    width: 27%;
    padding: 30px 3.15% 0; 
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

demo

【讨论】：

【解决方案2】：

这就是你要找的吗？ http://jsfiddle.net/swm53ran/91/

<div class="content">
    Here is some content
</div>
<div class="content">
    Here is some content<br/>
    Here is some content<br/>
    Here is some content
</div>  



$(document).ready(function() {
    var height = 0;
    $('.content').each(function() {
        if (height < $(this).height()) {
            height = $(this).height();
        }
    });  
    $('.content').each(function() {
        $(this).height(height);
    });
});

【讨论】：

【解决方案3】：

将文章包含在 div 中，然后使用弹性框。然后在项目上使用 flex-box-grow 和 flex-box-shrink 属性

【讨论】：

说明您所描述的内容可能会有所帮助。