Question

如果我希望我的div.row3在高度上相等，如果它使用ajax动态更改，我怎么能在CSS中编码它。表不能使用。（注意：我当前的代码使用js。我想知道是否可以使用CSS）

<div class="gridcontainer">

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>
    </div>
</div>

谢谢

Answer 1

使用table- * display：

.gridcontainer {
   display: table-row;
}

.columns {
  display: table-cell;
}

Demonstration

Answer 2

也许你可以用这个做点什么： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

或使用javascript（请选择css：

$(window).load(function(){
        //same height
        if ($(window).width() > 550) {
            $('#container').each(function(){  
                var highestBox = 0;
                $('.eq', this).each(function(){

                    if($(this).height() > highestBox) 
                       highestBox = $(this).height(); 
                });  
                $('.eq',this).height(highestBox);
            });
        }
    });

更新

CSS解决方案： http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

CSS - 如何使列等于

2 个答案: