像表格一样用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
投稿
猜你喜欢
- 前言本文将讲述怎么通过 MySql 的日志 binlog 文件进行数据恢复。通过已备份数据 加上 binlog 文件恢复上次备份到删除之间的
- 前言本来准备讲解nginx和apache的日志的,但是个人不太推荐apache(纯属个人爱好),这里就不介绍apache的日志了。作为一名程
- 本文实例讲述了机器学习之KNN算法原理及Python实现方法。分享给大家供大家参考,具体如下:文中代码出自《机器学习实战》CH02,可参考本
- 在使用JavaScriptSerializer.Serialize 方法转json对象时,遇到一个问题,后台方法生成的json字符串中有没有
- 加在< head>中< SCRIPT LANGUAGE="JavaScript">//more
- js 读取csv内容拼接成jsonformdata对象上传了csv文件,读取文件内容拼接成json对象var form = new Form
- 上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫
- 计算信息熵的公式:n是类别数,p(xi)是第i类的概率假设数据集有m行,即m个样本,每一行最后一列为该样本的标签,计算数据集信息熵的代码如下
- 一、文件操作pandas内置了10多种数据源读取函数,常见的就是CSV和EXCEL使用read_csv方法读取,结果为dataframe格式
- 在Linux下C连接MySQL出现问题如下:编译成功后,运行程序,出现./connect: error while loading shar
- 目录distinctgroup byrow_number在使用SQL提数的时候,常会遇到表内有重复值的时候,比如我们想得到 uv (独立访客
- Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具,使用该工具可以轻松获得Oracle 重作日
- 前几篇都是手动录入或随机函数产生的数据。实际有许多类型的文件,以及许多方法,用它们从文件中提取数据来图形化。比如之前python基础(12)
- 本文实例讲述了mysql外键基本功能与用法。分享给大家供大家参考,具体如下:本文内容:什么是外键外键的增加外键的修改和删除外键的约束模式首发
- 在Netbeans中由于使用了Swing进行开发,所以其中界面的字体也是由Java虚拟机进行配置而不是随操作系统的。在安装完Netbeans
- 在 .NET Framework 2.0中,ConfigurationManager类新增了两个属性AppSe
- python 自动化批量生成前端的HTML可以大大减轻工作量下面演示两种生成 HTML 的方法方法一:使用 webbrowser#codin
- 网上下载的 pdf 学习资料有一些会带有水印,非常影响阅读。比如下面的图片就是在 pdf 文件上截取出来的。安装模块PIL:Python I
- 常量:用于储存一个不会变化也不希望变化的数据的标示符(命名规则与变量相同)定义形式:使用 define() 函数定义使用形式:define(
- 一、安装mysqlclient网上看到很过通过命令:pip install mysqlclient 进行安装的教程,但是我却始终安装失败,遇