像Table一样对层DIV进行轻松布局
日期:2008年5月19日 作者: 查看:[大字体 中字体 小字体]-
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。
先看看xhtml的结构:
<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></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.然后定义宽度
这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.(出处:http://www.hackhome.com/)
-
- 像Table一样对层DIV进行轻松布局 相关文章:
- ·从头到尾教你组建小型局域网
- ·局域网常用的DOS查询IP地址命令
- ·如何实现局域网打印机共享
- ·求助:如何知道自己是否被人限制局域网内网速!
- ·如何进行局域网设置
- ·局域网内共享文件 提示没有访问权限的问题
- ·大型企业局域网安全解决方案(1)
- ·校园网局域网组网方案剖析
- ·局域网连接设备--局域网知识
- ·关于局域网限制网速的问题
- 像Table一样对层DIV进行轻松布局 相关软件
- ·《新仙剑奇侠传》凄美结局动画
- ·局域网共享设置梦想吧专用版
- ·《霸王阴功》完美结局补丁 无敌初始存档
- ·《风色幻想3》完美结局存档
- ·《幻世录2》完美结局存档
- ·《新绝代双娇3》所有完美结局
- ·《楚留香新传》结局存档
- ·局域网超级工具 NetSuper V3.0
- ·《波斯王子2》双结局完美存档
- ·《天龙八部》完美结局存档
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
精品推荐
热点TOP10
- ·Div+CSS+JS树型菜单,可刷新
- ·一款DIV+CSS导航条效果
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·Javascript+CSS横向三级导航菜单
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS+DIV实现的滑动门菜单特效代码
- ·CSS定位:left
- ·CSS文本:text-overflow
- ·用网页标准DIV+CSS创建固定宽度的网页布局
- ·使用纯 CSS 设计3D按钮
- ·设计一个基于CSS的网页模板
- ·DW MX 2004 CSS 属性详解
- ·CSS+DIV自适应高度布局
- ·站长推荐:53个CSS-不可或缺的技巧
- ·Div+CSS基础教程(二)
- ·如何用CSS定义表格与模拟表格
- ·CSS定位:bottom
- ·如何使用CSS来进行网页排版
- ·CSS垂直树形下拉菜单
- ·创建一个纯CSS的水平导航条
特别推荐
- ·DIV+CSS常用的网页布局代码
- ·css网页设计非常有用的解决办法
- ·CSS网站布局技巧几则总结
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS样式设计之CSS滤镜资料小结
- ·总结:用CSS进行网页样式设计攻略全集
- ·创建一个纯CSS的水平导航条
- ·如何用css设置网页字体
- ·CSS中的滑动门技术
- ·Javascript+CSS横向三级导航菜单
- ·CSS文本:word-wrap
- ·用CSS进行网页样式设计攻略全集
- ·用CSS实现的固定表头的HTML表格
- ·CSS属性列表
- ·如何使用CSS来进行网页排版
- ·使用纯 CSS 设计3D按钮
- ·纯CSS制作简洁的垂直导航
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS 制作的三级菜单特效代码
- ·设计一个基于CSS的网页模板
