DIV Table

先看看xhtml的结构:

<div>
<div class=”row”>
<div></div>
<div></div>
<div class=”three”></div>
</div>
</div>

很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

下来是css:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {

}

解释:

1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
2.border- collapse:separate;边框独立,就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr 显示
4.display:table-cell;将.row的下级div作为表格单元格td显示
5.然后定义宽度

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s