表列中的高度相等

我正在团队成员页面上工作，到目前为止，我已经设法使用表格将团队成员信息和标题列设置为相同的高度。表列中的高度相等

现在，我试图让每个团队成员的部分都是相同的高度，但我有真正的麻烦。

基本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

表列中的高度相等

回答

相关问题