html - 2 列中的许多 DIV 容器，每行具有相同的灵活高度

Question

我解决了问题...解决方案在这里:http://jsfiddle.net/4Z8np/48/

---

我通过 PHP 函数生成了这段 HTML 代码:

<div class="columns">
<?php
foreach($rows as $rows))
{?>

    <div class="row">
    <?php echo $row->content ?>
    </div>

<?php } ?>
</div>

CSS:

div.columns{
 width:100%;
}

div.rows{
 width:50%;float:right;border:1px solid red
}

结构是这样的:

<div class="columns">
  <div class="rows">
      <p>text</p><p>text</p><p>text</p>
  </div>
  <div class="rows">
      <p>text</p>
  </div>
  <div class="rows">
      <p>text</p><p>text</p>
  </div>
  <div class="rows">
      <p>text</p>
  </div>
</div>

http://jsfiddle.net/4Z8np/4

4/结果是 2 列中的许多红色框彼此相邻......对吗？

我的问题:红色框的高度不一样...有时只有一个框排成一排。

我想:我想将每行中的每个 2 个红色框设置为相同的高度。(根据更大的高度而不是固定高度)

怎么做到的？

---

编辑:

http://jsfiddle.net/4Z8np/44/

这个结果很难看...例如 text7 换行了!

至少我希望 text7 紧跟在最新的列之后...

Answer 1

如何使用 css 显示:(table|table-row|table-cell)？

http://jsfiddle.net/4Z8np/46/

div.table{
    display: table;
    width: 100%;
    height: 100%;
}
div.row{
    display: table-row;
    height: 100%;
}
div.cell{
    border:1px solid red;
    display:table-cell;
}