javascript - 表格列的高度相等

Question

我正在处理一个团队成员页面，到目前为止，我已经设法使用表格让团队成员信息和他们的标题列具有相同的高度。

现在，我试图让每个团队成员的部分也具有相同的高度，但我遇到了真正的麻烦。

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

有人会建议一种使所有列高度相等的方法吗？

更新

是的，左右两列是相等的。我提到我已经使用表格实现了这一点。我想做的是相同高度的“团队元素”。

Answer 1

将此添加到 $(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 

到 .left-column 和 .right-column 类。 这会将所有团队元素设置为具有最高高度的团队元素的高度。