在 <div> 样式内联块中对齐高度

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%; 分配给该行的单元格。不过，这不是动态的。如果您希望 contents 垂直对齐，您需要在没有预定义高度的单元格内放置另一个 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/

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

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)
                 });