Question

我有http://jsfiddle.net/g5bE8/。我需要在所有行中对齐高度，我该怎么做？

<div class="test">
   <div class="row">one block</div>
   <div class="row">
      three block
      <br>three block
      <br>three block
      <br>three block
      <br>three block
   </div>
   <div class="row">three block</div>
   <div class="row">one block</div>
   <div class="row">three block</div>
   <div class="row">three block</div>
   <div class="row">one block</div>
   <div class="row">
      three block
      <br>dewdfwe
      <br>rgegregrethree block
      <br>dewdfwe
      <br>rgegregre
   </div>
   <div class="row">three block</div>
</div>

.test{margin: 20px;}
.row{display: inline-block; margin: 2px; text-align: center; width: 200px; border: 1px solid black; border-radius:5px;  vertical-align: middle; color: black;}

Answer 1

选项1：静态高度行。

您可以指定每行的高度，然后将height: 100%;指定给该行的单元格。但这不是动态的。如果您希望内容垂直对齐，则您需要将另一个div放在没有预定义高度的单元格内，并再次使用vertical-align: middle。

此方法要求您将每个水平组分成不同的标记，例如：

div.row
   div.cell
   div.cell
   div.cell
div.row
   div.cell
   div.cell
   div.cell

备选方案：

如果您无法分隔行，则可能需要javascript来为您计算高度。同样的事情如上所述，每个单元格将是行的100％高度。但是，您不一定需要拆分每一行，但可能需要重新计算高度。

但这是非常开放的。使用javascript有一百种方法可以做到这一点。

以下是一个解决方案：http://css-tricks.com/equal-height-blocks-in-rows/

它将同一行上所有单元格的高度设置为最高单元格的高度。它不会垂直对齐任何东西，但正如我所说，只需将另一个div放在vertical-align: middle内。或者查看许多其他垂直对齐选项之一。再一次，有一百种方法可以做到这一点。

Answer 2

我通过js制作的结果代码。有一些结果的照片。

http://joxi.ru/4cfgU_3JTJDiB2K7aoE http://joxi.ru/_cfgU4wyTJDjAixFFRI

var line1 = []; var line2 = [];

                 var tumbler = 0;
                 var height = $('#t_1').offset().top;

                 $("div.product__bl").each(function() {

                     if (tumbler == 0) {
                         if (height < $(this).offset().top) { tumbler = 1; line2.push(this.id); } else { line1.push(this.id);}
                     } else { line2.push(this.id); }
                     //alert(this.id);

                 });

                 var maxHeight = 0;

                 $.each(line1, function(){
                     var item = $('#'+this).height();
                     if (item > maxHeight)
                         maxHeight = item;
                 });
                 $.each(line1, function(){
                     $('#'+this).height(maxHeight+10)
                 });


                 maxHeight = 0;

                 $.each(line2, function(){
                     var item = $('#'+this).height();
                     if (item > maxHeight)
                         maxHeight = item;
                 });
                 $.each(line2, function(){
                     $('#'+this).height(maxHeight+10)
                 });

在<div>样式inline-block </div>中对齐高度

2 个答案:

选项1：静态高度行。