html - 三个 div - 排列为表格

Question

我有三个div：

<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 制作它，就像用 TABLE 一样？

Answer 1

简单的答案是使用 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 2

有几种方法可以实现这一点。

一种选择是使用display:table-cell和相关的样式来使其表现得完全像一张桌子。

另一种是float按您的方式使用，但定义width容器的 并根据clear需要定位它们。

这是后一个选项的一个小提琴：http: //jsfiddle.net/adnrw/7datp/4/显示padding和margins 以匹配table内置cellspacing和cellpadding

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;在.three. 要在容器上保留所有 3 divs 的高度，您可能需要在其上添加 adiv和clear:left;而不浮动。