文章标签的动态高度

Question

动态调整内容块时遇到问题，尤其是它们的高度。有代码结构（不要介意是否遗漏了任何结束标记等，它们在运行版本中）：

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

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

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

Answer 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

Answer 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);
    });
});

Answer 3

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

文章标签的动态高度

dynamical height of article tag

html

css

row-height