0

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

<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 解决方案，但它似乎不适用于文章中如此多的内容层。任何建议、可能的解决方案或链接都会有很大帮助。谢谢转发！

4

3 回答 3

2

在这里，您可以通过不同的方法获得一篇关于该主题的好文章。

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

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

演示

于 2015-01-15T16:20:31.803 回答
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);
    });
});
于 2015-01-15T16:22:23.607 回答
1

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

于 2015-01-15T16:22:51.123 回答