像表格一样用DIV+CSS给网页布局
发布时间:2008-10-18 15:45:00
标签:布局,表格,css
有个简单的方法,使用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经过测试均可以完美显示.
0
投稿
猜你喜欢
- 如何一行行地读取文件?这样就可以做到一行行地读出了:dim input(30) ' 定义一个数组,大小
- 这个弹出层的登录界面挺好看,很清爽所以转了过来给大家分享,要实现这个功能很简单:首先设计一个登录界面,使用css中的display=&quo
- 又从 James Padolsey 这里得到个好的点子。在实际写脚本过程中可能有段 Javascript 和 HTML 非常相关(比如实例化
- 弄个随机数的东西,直接从网上找了一个现成的,简单看了两眼,感觉算法应该是对的,但今天测试下来,是不对的;网上大多数人用的写法是这样的:fun
- 比如说在1-3000之内生成随机永不重复数,点击运行代码的时候请注意,此代码比较占用资源,如果硬件配置比较菜请把count改小。俺的电脑配置
- 如果独自放着jQuery做事,它绝对做得很好,但jQuery充许与其他库共存在,有些事就防不胜防了。看下面代码data :func
- 另外他们列出的这些区别有些是蛮有意义的,有些可能由于他们本人的MySQL DBA的身份,对Oracle的理解有些偏差,有些则有凑数的嫌疑.
- 无论是在小得可怜的免费数据库空间或是大型电子商务网站,合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用MySQL数
- 今天不小心又点了收藏夹里Google的新首页风格的地址,赫然发现又变了!从这个页面上线以来,偶尔会去看看,短短一年的时间,已经变换了至少三次
- 呃,看到这个标题,我们可以首先将IE系浏览器无视了。我承认,我是有极简主义倾向的,我希望能够使用最少的代码和图片做更多的事情。虽然CSS3仅
- 对MySQL的用户而言,备受诟病的一个问题就是导入SQL备份文件时不能并发,使得导入的效率很低。今天,我们就来改变下思路,尝试一下并发导入的
- If...Then...Else 语句的一种变形,即添加任意多个 ElseIf 子句以扩充 If...Then...Else 语句的功能,允
- 流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈现。但是,糟糕的代码结
- 之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,
- 代码如下:'===================================== '获得文件后缀 '=====
- 浏览器:IE ,不支持firefoxfilter视觉滤镜的种类:Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) Dro
- 最近没事,写了个在项目经常要取城市或省份名的方法,所以改成了一个类.方便以后调用//****************************
- 阅读上一篇:一个完美网站的101项指标.第六部分.性能 符合 W3C 标准是网站的发展趋势,目前,几乎所有的浏览器都使用 W3C 标准,W3
- 如何自动更新导航栏?下面看看如何具体使用Content Linking组件: <&nbs
- 【原文地址】My "First Look at Orcas" Presentation 【原文发表日期】 Th