表列中的高度相等

我正在團隊成員頁面上工作，到目前爲止，我已經設法使用表格將團隊成員信息和標題列設置爲相同的高度。表列中的高度相等

現在，我試圖讓每個團隊成員的部分都是相同的高度，但我有真正的麻煩。

基本HTML是：

<div class="team-item-wrapper"> 

     <div class="team-item"> 

      <div class="left-column"> 

       <div class="team-image"></div> 

       <div class="team-excerpt"><?php the_content(); ?> 
       </div> 

      </div><!--/ Left Column --> 

      <div class="right-column"> 
       <div class="inner"> 
        <h2 class="team-title"></h2> 
        <div class="divider"</div> 
        <div class="team-position"></div> 
       </div><!--/ Inner --> 
      </div><!--/ Right Column --> 

     </div><!--/ Team Item --> 

    </div><!--/ Team Item Wrapper -->

的CSS是：

.team-item-wrapper{ 
    padding: 0px 40px 20px 0px; 
    display: table; 
    width:50%; 
    float:left;} 

.team-item .left-column{ 
    width:65%; 
    display: table-cell; 
    padding-right:20px;} 

.team-item .right-column{ 
    width:35%; 
    display: table-cell; 
    position:relative;} 

.team-item .right-column .inner{ 
    text-align:right; 
    width:100%; 
    position:absolute; 
    bottom:0px; 
    padding: 0px 20px 20px 20px;}

我已經嘗試了一些CSS方法，但這些似乎並沒有影響到表格單元格的。我也試過這個JS：

<script type="text/javascript"> 
     var maxHeight = 0; 
     $(".level").each(function(){ 
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
     }).height(maxHeight); 
</script>

實況dev的鏈接可以看到here.

任何人都可以提出來讓所有列高度相等的方法？在此先感謝:-)

是的，左列和右列是相等的。我提到我已經使用表格實現了這一點。我試圖做的是「團隊項目」相同的高度...

來源

2015-08-08 CharlyAnderson

使用實際表 –

目前還不清楚你想要什麼。左欄和右欄的高度相同：https：//jsfiddle.net/kqehyz2h/1/表格單元格的工作方式與完全相同，表格行爲和「表格」爲

。只需使用那張桌子上的桌子，它就可以工作。 – Jeffrey

@RachelGallen - 問題要求在**表**列中具有相同的高度，CSS將div設置爲'display：table-cell'，我沒有進入鏈接，因爲我沒有足夠的愚蠢以遵循盲目鏈接在SO上。我認爲這個問題是關於表格數據的（表格有點暗示） - 是的，表格是實現頁面佈局的一種很愚蠢（90年代）的方式 - 但是一種顯示錶格數據的完美方式 - 我敢於建議使用表格的錯誤 –

回答

將此添加到$（document）.ready函數。

var maxHeight = function(){ 
    var m = 0; 
    $('.team-item-wrapper').each(function(){ 
    if($(this).outerHeight() > m){ 
     m = $(this).outerHeight(); 
    } 
}); 
return m; 
} 

$('.team-item .left-column, .team-item .right-column').height(maxHeight())

然後加入

vertical-align:center

到。左柱和.right-柱類。這會將所有團隊項目設置爲具有最高高度的團隊項目的高度。

來源

2015-08-08 14:12:17 XPD

這是偉大的，似乎工作。現在唯一的問題是團隊照片的頂部看起來有一個巨大的間距。 – CharlyAnderson

您是否將樣式添加到左列和右列類？ – XPD

相關問題