|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
上面是我翻译的内容,是依据我对文章的了解意译的,你就别挑那里翻译的不合错误了,我的目标只是转达这个CSS技能。
很多网页计划师都喜好,将两个大概多个容器等高的并排安排,并在内里展现每一个容器的内容,就象典范表格结构中的单位格把持几个栏目标地位,也喜好容器的内容居中或顶部对齐显现。
可是你又不喜好用table来完成他,那怎样办呢?完成的办法良多,有依据视觉错觉完成的,有效JS把持使高度相称的,另有接纳容器溢出部分埋没和列的负底界限和正的内补钉相分离的办法来办理列高度不异的成绩。
实在有个复杂的办法,利用display:table,display:table-rowanddisplay:table-cell就能够完成,并且高度小的容器会自顺应那些高度绝对较高的,可是IE不撑持这个属性,我们先不必往叱责IE,信任今后会有所改良的。这里我制造了一个模子。
先看看xhtml的布局:
<divclass="equal">
<divclass="row">
<divclass="one"></div>
<divclass="two"></div>
<divclass="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;
}
.rowdiv{
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.然后界说宽度
这里还利用了border-spacing:10px;来区分几个盒子,正如下面所报告的,IE下不克不及一般显现,可是在:Mozilla1.6,Opera7.50,Safari1.2.2,Firefox0.8,OmniWeb5b,Camino0.8b,andNetscape7.1经由测试都可以完善显现.
</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 |
|