相关疑难解决方法(0)

我正在尝试构建类似于以下内容的布局:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

底部填充上排空间.

如果这是一个真正的表,我可以很容易地实现这一点<td colspan="3">,但由于我只是创建一个类似于表的布局,我不能使用<table>标签.这可能使用CSS吗？

我有以下代码:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

非常直截了当.如何为元素添加colspan(或等效的colspan)display: table-cell？

我现在有点困惑,因为我的CSS代码有效,但它根本不漂亮.我现在想重写这些CSS样式并通过LESS构建它们.我和display:table;/ display:table-row;和我有很大的问题display:table-cell;.

例如,我有以下代码:http://jsfiddle.net/La3kd/2/

我怎么能做到最后一个单元格(中心)不会将上面的第二个单元格向右移动？最后一个单元格应该具有上面2个单元格的宽度.需要一些colspan.这太奇怪了,因为我觉得它在我重新编写代码之前有效.但是现在右边的所有元素都完全转移了.