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>

有人会建议一种让所有列都相等的方法吗？

更新

是的，左右列是相同的。我提到我已经使用表格实现了这一点。我要做的是＆＃34;团队项目＆＃34;同样的高度。

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类。这会将所有团队项目设置为具有最高高度的团队项目的高度。

表格列中的高度相等

更新

1 个答案: