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>

LIVE

如何使用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和margin显示与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 div个容器的高度，您可能需要在其上添加div和clear:left;而不会浮动。

三个div - 安排为表

3 个答案: