三分表-排列为表

Question

我有三块钱：

<div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

.one {
    width: 100px;
    height: 200px;
    background-color: red;
}

.two {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

.three {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}

但这不太好。我希望收到：

<table>
    <tr><td rowspan="2" class="one"></td><td class="two"></td></tr>
    <tr><td class="three"></td></tr>
</table>

活着

我怎样才能用DIV制作它，就像用桌子一样？

Answer 1

要做到这一点，有几种方法。

一种选择是使用display:table-cell和相关的样式来使它精确地表现为一个表。

另一种方法是按照您的要求使用float，但是定义容器的width，并使用clear来根据需要对它们进行定位。

下面是后一种选择的小提琴：http://jsfiddle.net/adnrw/7datp/4/与padding和margin一起展示，与在cellspacing和cellpadding中构建的table相匹配

Answer 2

的简单答案是使用CSS将其显示为一个表.

您可以使用以下样式来实现不使用HTML的表布局。

display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;

Answer 3

试一试，就像：

.one,.two,.three{
  width:100px; float:left;
}
.one{
   height:200px; background-color:red;
 }
.two{
   height:100px; background-color:green;
}
.three{
  height:100px; background-color:blue; clear:left;
}

基本上，就是clear:left; on .three。为了在容器上保留所有3个div的高度，您可能需要在容器上添加一个div和clear:left;，而不需要浮动。