物品标签的动态高度

无法动态调整内容块，特别是其高度。有代码结构（如果错过任何关闭标签或等不介意，他们在那里运行的版本）：物品标签的动态高度

<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解决方案，但它似乎并没有适应文章中这么多层次的内容。任何建议，可能的解决方案或链接都会有所帮助。非常感谢！

来源

2015-01-15 Mindaugas Jačionis

据我所知，只有通过x-browser方式实现此目的的方法是使用javascript – atmd 2015-01-15 16:00:55

不兼容的CSS解决方案与旧的浏览器也没关系 – 2015-01-15 16:06:56

@MindaugasJačionis你找到一个解决方案？ – 2015-01-21 12:46:21

用div封闭文章，然后使用弹性盒。然后使用项目上的flex-box-grow和flex-box-shrink属性

来源

2015-01-15 16:22:51

说明你所描述的内容可能会有所帮助。 – Plutonix 2015-01-15 16:35:38

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

来源

2015-01-15 16:20:31

这是你在找什么？ 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-15 16:22:23 indubitablee

物品标签的动态高度

回答

相关问题