動態列具有相等高度

請檢查下面的代碼和問題動態列具有相等高度

.container_12 { 
 
    overflow: hidden; 
 
} 
 
.grid_4 { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    float: left; 
 
} 
 
.container_12 .grid_4 { 
 
    width: 33.333333333333336%; 
 
}

<div class="container_12"> 
 
    <div class="grid_4">Div 1</div> 
 
    <div class="grid_4">Div 2 with extra content</div> 
 
    <div class="grid_4">Div 3 with extra content</div> 
 
    <div class="grid_4">Div 4</div> 
 
    <div class="grid_4">Div 5 with extra content</div> 
 
</div>

在上面的代碼，grid_4在對準3一行，剩餘的將包裝到下一行。這些grid_4是動態生成的，甚至可以刪除。例如，如果我刪除股利4和DIV 5移動到事業部4的位置，如下面的代碼

<div class="container_12"> 
      <div class="grid_4">Div 1</div> 
      <div class="grid_4">Div 2 with extra content</div> 
      <div class="grid_4">Div 3 with extra content</div>   
      <div class="grid_4">Div 5 with extra content</div> 
     </div>

這些div的由具有不同含量和不同高度。所以問題是我如何保持行高和每行12/4 = 3列？這可以通過設置元素的高度來實現jquery。但有沒有其他可能的方式來實現這一點，只使用CSS [無Flexbox - 因爲移動兼容性]

在此先感謝。

來源

2016-09-16 Yesvinkumar

這裏是你的答案LIVE FIDDLE只需使用jQuery的2.2.4.min.js作爲extarnal資源和短你的css部分，並使用此腳本

var maxHeight = 0; 

$(".container_12").each(function() { 
if ($(this).height() > maxHeight) { 
    maxHeight = $(this).height(); 
    } 
}); 

$(".grid_4").height(maxHeight);

來源

2016-09-16 09:44:53

感謝您的反饋..是否有任何CSS唯一的解決方案...？ – Yesvinkumar

這是現在最好的解決方案。在CSS中，您可以使用flex，但如果在瀏覽器調整大小後使用flex，第二行將設置不同的高度，這是第二行上的最大值。或設置高度值並使溢出：滾動，但看起來很醜。 –

yes..but爲什麼我們使用jquery-2.2.4.min.js？在jQuery 1.8.2的最大高度總是顯示0 ...有沒有可能實現這一點與使用jQuery 1.8.2 – Yesvinkumar

CSS3 Flexbox是爲此而引入的。它可以通過簡化代碼&來處理敏感的&複雜佈局，從而在不使用任何框架的情況下提高可讀性。它也適用於所有最新的瀏覽器，包括IE11，部分支持IE9，IE10。 here is the CanIUse link

您可以輕鬆地實現通過下面的代碼解決方案：

.container_12 { 
    display: flex; //initialises flexbox 
    flex-wrap: wrap; //tells it to wrap overflowing contents 
} 
.grid_4 { 
    flex: 0 0 33%; 
}

它的那樣簡單！ Codepen here

更好，這涵蓋了您的動態高度&寬度要求。你也可以去通過flex property（簡寫爲flex-grow，flex-shrink，flex-basis），以獲得更多的瞭解「彎曲」的您的div的尺寸

來源

2016-09-16 08:31:03

我可以問爲什麼downvote？你甚至試過這個或通過flexbox？ –

可能flexbox是解決方案..但..根據http://caniuse.com/#search=flexbox它只支持從Android 4.4 ...下面，我們必須做一些回退... – Yesvinkumar

所以沒有對android的支持是downvote答案的理由嗎？！當答案沒有幫助時，你會「失望」，並不是因爲它不支持全世界的所有設備和瀏覽器 - 你可以只提一提。這樣幾乎每一塊前端代碼都不能在

動態列具有相等高度

回答

相關問題