物品標籤的動態高度

無法動態調整內容塊，特別是其高度。有代碼結構（如果錯過任何關閉標籤或等不介意，他們在那裏運行的版本）：物品標籤的動態高度

<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

物品標籤的動態高度

回答

相關問題