我解决了问题...解决方案在这里: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>
4/ 结果是 2 列中的许多红色框彼此相邻......对吗?
我的问题: 红色框的高度不一样...有时只有一个框排成一排。
我想: 我想将每行中的每个 2 个红色框设置为相同的高度。(根据更大的高度而不是固定高度)
怎么做到的?
编辑:
这个结果很难看...例如 text7 换行了!
至少我希望 text7 紧跟在最新的列之后...
最佳答案
如何使用 css 显示:(table|table-row|table-cell)?
div.table{
display: table;
width: 100%;
height: 100%;
}
div.row{
display: table-row;
height: 100%;
}
div.cell{
border:1px solid red;
display:table-cell;
}
关于html - 2 列中的许多 DIV 容器,每行具有相同的灵活高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22131312/