网站建设  下载中心 社区论坛 信息公告 MY小屋
联系我们
设为首页
加入收藏

 

当前位置:首页>>网页设计>>Dreamweaver>>正文
注:打开慢时请稍等

CSS技巧学习:像table一样布局div

  日期:2007-4-28 9:26:41  来源:  点击:
参加讨论

下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧。许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。

但是你又不喜欢用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经过测试均可以完美显示.

至此整个任务就结束了。


编辑: [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:像table一样布局div II
下一篇:没有了
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
像table一样布局div II Flash纯脚本生成饼图  如何用CSS定义表格与模拟表格 
div+css布局漫谈 网页最简短的拖动对象代码实例演示 多种网页弹出窗口代码 防拦截弹出窗口代
随滚动条移动的DIV层 CSS中的滑动门技术 网页制作入门教程:关于css样式表
从基础到精通:CSS实用教程(三) 从基础到精通:CSS实用教程(二) 从基础到精通:CSS实用教程(一)
CSS样式表:详细介绍IE7新支持的选择器 用CSS设计网页艺术字效果 页面控制常见问题及解决办法 
网页设计中HTML常犯的五个错误  教你用好活动字幕标记--Marquee  百度的首页简单吗?新浪的首页复杂吗?
Dreamweaver网页中实用的制作技巧 Dreamweaver经典问题大搜罗 解决Deamweaver8中CSS应用无效问题
CSS+DIV设计实例:看看IE中有关1px的Bu CSS+DIV设计实例:Hover over下的边框变 CSS使用技巧20则
最新更新 热点排行 推荐新闻
CSS技巧学习:像table一样布局div
像table一样布局div II
网页布局的位置重心与位置间的对比关系
用Dreamweaver8搞定web标准
用Dreamweaver设计限时自动关闭的网页
CSS技巧学习:像table一样布局div
像table一样布局div II
快速获取Flash课件中的素材
中文.BIZ,中文.TM域名即将开放 
中文域名又添“新兵”
中文.TW成功注册范围甚广 
一天出5变种 ANI蠕虫制造者称要买宝马
微软惊现史上最大漏洞 600木马疯狂肆虐
比熊猫烧香更可怕 光标漏洞病毒现网络
雅虎重启“易搜”域名 官方否认用意
CSS技巧学习:像table一样布局div
像table一样布局div II
77条Windows Vista特性总结
在ASP与ASP.NET之间共享对话状态(2)
Photoshop十余种漂亮照片边框简单制作
Photoshop实例教程:打造超炫发光圈
照片处理:Photoshop人物照片换头术
Photoshop实例:调出漂亮MM的唯美效果
Vista被破解 一个小程序可成功激活
比熊猫烧香更可怕 光标漏洞病毒现网络
解决了带javascript语句的链接全都打不
一天出5变种 ANI蠕虫制造者称要买宝马
用Dreamweaver8搞定web标准
网页里插入视频文件方法大全
Dreamweaver 限制访问的BUG
Dreamweaver MX 2004的Flash动画元素
DW精细化网页中表格的外观
一天出5变种 ANI蠕虫制造者称要买宝马
微软惊现史上最大漏洞 600木马疯狂肆虐
比熊猫烧香更可怕 光标漏洞病毒现网络
实用的存储过程之一
应用存储过程按月建数据表
sql server2000中怎么对存储过程进行加
在Asp中使用存储过程数值类型值
分页 SQLServer存储过程
在SQL Server的存储过程中调用Com组件
存储过程编写经验和优化措施

设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
Copyrights © 2004-2007 iYiT.Net All Rights Reserved.
网站合作、广告联系QQ:147007642、466949678
易特网络技术 点击这里给我发消息