下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个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经过测试均可以完美显示.
相关推荐
可以把表格布局转变成CSS+DIV布局。
Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频:(演示视频为英文版本,软件为中文版本) http://www.table2css.com/demo-video ...
Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个软件原来是老外做的,收费的,但是经北京采摘在线Nodody汉化破解,已经没什么限制,完全可用了。 ...
不用到table标签也能实现 table功能。
介绍:Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器,允许调整转换设置. +通用CSS前缀配置默认值"gen". ...
网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的...
介绍:Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器,允许调整转换设置. +通用CSS前缀配置默认值"gen". ...
Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。
Table2CSS Converter这是一个搜索引擎优化工具,转换成网页的HTML代码表tableless的CSS 。...Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录批量转换。
与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML...
关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用...
是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个...
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 表格类 下表样式可用于表格中: , <th> 和 <td> 类 下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带...
DIV+CSS 网页重构 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现...
但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格(<table>)来布局 Web 页面的内容。 使用表格进行...
我们在jb51.net一直强调... 首先你要知道,当你开始学习DIV+CSS的时候,你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话),然而这项技术更适合刚接触网页制作的人。 然后你要知
Table2CSS Converter V3.0.0 汉化版将表格布局网页完美转换成DIV+CSS方式
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js,有的视频...
– #table { width:701px!important; width:700px; border-top:1px #000 solid; } #table ul { margin:0px; padding:0px; width:701px!important; width /**/:700px; list-style-type:none; border-bottom:0px #000 ...