动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.精通 CSS 滤镜(一).
.精通 CSS 滤镜(二).
.超强,用CSS构建iframe效果.
.css技巧之PDF、ZIP、DOC链接的标.
.CSS 循序渐进(三)样式“表”秀 .
.CSS中常用的单位.
.CSS教程:CSS文件应该保持整洁和统.
.CSS实用教程(三).
.CSS教程:元素详解.
.不用float实现模块居中布局.
.用CSS设计高体验的表单显示效果示.
.CSS仿淘宝首页导航条按钮布局效果.
.CSS+DIV设计实例:超酷的竖排导航.
.学习CSS制作网页总结的一些经验.
.web标准化设计:常用的CSS命名规.
.创建一个纯CSS的水平导航条.
.CSS框架的利与弊.
.纯CSS制作的网页中的lightbox效果.
.如何将XHTML+CSS页面转换为打印机.
.推荐一些所谓的CSS的“顶级”技巧.

如何像table一样对层div进行轻松布局

文章类别:CSS教程 | 发表日期:2008-4-18 |


下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个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经过测试均可以完美显示.


上一篇:初学DIV+CSS应该理解HTML标签的语义 人气:1765
下一篇:JS解决网站防挂IFRAME木马方案 人气:506
点击此处浏览全部css的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-11 东旭网络问卷调查系统 v2.4 Beta2
2008-5-11 非零坊『留言本』 v3.3.1
2008-5-11 e新时代企业网站管理系统 v6.0 S
2008-5-11 依悠广告管理系统 v2.1
2008-5-11 Gxjss留言本 v1.0
2008-5-11 深圳公交车线路查询系统 v1.0
2008-5-11 麦群网整站程序 (080510版)
2008-5-11 杰奇小说连载系统 v1.1
2008-5-11 小型FLASH+ASP+XML的新闻发布系统
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報