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

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

时间: 2024-12-27 06:28:26

如何像表格table一样对层div进行轻松布局的相关文章

div+css网页布局教程(1):float属性介绍

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家好,我是毛仔,从今天开始毛仔和大家一起学习div+css页面布局. 从2008年7月份开始,毛仔辞去了原来的工作,和ofseo老兄一起"网络创业".在那半年时间里学习了不少东西,包括div+css网页设计,seo相关知识,单页面做google adsense,玩熟了dedecms等各大cms和论坛系统-- 通过几个月的

使用DIV+CSS制作网页后,表格Table还有用吗?

css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很

使用DIV+CSS后,表格Table还有用吗?

   符合网页标准的网页是DIV+Css制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,

DIV+CSS网页布局和TABLE相比有哪些明显优势

DIV+CSS是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种样式制作定位. div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离. div 是标签 css是层叠样式表(css样式) DIV CSS高级布局已逐渐流行,

html-HTML中 表格table 外面的线是怎么实现的,而且外线框上还有表格标题

问题描述 HTML中 表格table 外面的线是怎么实现的,而且外线框上还有表格标题 解决方案 这里面是标题 这里面是FIELDSET标签内的内容. 这里面是FIELDSET标签内的内容. 解决方案二: fildset里面套个table就可以了. 解决方案三: http://www.educity.cn/wenda/8408.htmlhttp://fun.sobar.com.tw/list.asp?id=148776 fieldset 解决方案四: 里面就是table好了 解决方案五: http

绝对居中的层div+css代码示例

绝对居中的层div+css代码示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 11</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"><!--

CSS设置层div的透明度

1.样式代码 #layout { position:absolute; top:50px; width:500px;  background:#fff; filter: alpha(opacity=70); opacity: 0.7;} 1.弹出窗口出现灰色透明背景,内容层不能操作. 定义两个层: <div style="background:red; filter: alpha(opacity=45); opacity:0.45; position:absolute;top:0px;le

html表格table的宽度超出页面宽度时如何不改变table宽度(只显示出滚动条)?

问题描述 html表格table的宽度超出页面宽度时如何不改变table宽度(只显示出滚动条)? 问题如题.条件是不能将table的宽度设置为固定值,因为table包含的列数可能每次查询都不同,可能只有一二列,也可能有几十列,要求每一列宽度能够显示其表格的内容(即列的宽度按内容长度显示),如果table宽度没有超出页面宽度就不显示滚动条,也不拉伸表列宽度:如果table宽度超出页面宽度,就显示滚动条,而不压缩表列宽度. 解决方案 http://blog.sina.com.cn/s/blog_66

jQuery 选择表格(table)里的行和列[转]

from : http://www.84ren.com/read.php?tid-29040.html jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二