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个红色框，高度相同。（根据更大的高度而不是固定高度）

怎么办？

编辑：

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

这个结果太丑了......例如text7已经换了新行！

至少我知道文字7在最新的专栏之后......

Answer 1

如何使用css display :( 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;
}

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

1 个答案: