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你用不同的方法有一篇关于这个主题的好文章。

我喜欢 One True Layout Method ：

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-box-grow和flex-box-shrink属性

物品标签的动态高度

3 个答案: