摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html

  许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
  但是你又不喜欢用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经过测试均可以完美显示.

  上面的问题就是,这个模型对IE来说等同于垃圾,所以基本只能是做来玩玩而已,没有什么实际的用处,现在我要做的就是,让它也能在IE下更好的显示,所以我又做了第二个模型

  xhtml结构类似第一个模型 的只是增加一个新的div给IE

<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<!--[if IE]>
<div class="ieclearer"></div>
<![endif]-->
</div>
</div>

  给xhtml增加一个判断,判断是否为IE,然后给IE一个特殊待遇,在IE显示和别的浏览器不同的代码,对于这个判断IE\MAC优先选择显示其间的内容。

  然后在CSS中也增加一个判断,配合xhtml,用浮动对齐(浮动对齐就不用解释了)的方式来实现容器的等高并排放置,但是还是无法真实的实现等高,你可以采用添加背景颜色的视觉错觉来实现视觉上的等高,或者采用别的方法,这里就不进行说明了。

  下面是CSS中的代码

<!--[if IE]>
<style type="text/css" media="all">
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]-->

  到此,整个设计真正的完成了,虽然不够完美,对非IE而做出努力显得有点多余,现在要么IE支持第一个模型,要么我们可能会想出更好的方案来。但是这次尝试是有价值的。

CSS技巧!像table一样布局div的更多相关文章

  1. 像table一样布局div

    原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...

  2. 像table一样布局div的CSS属性详解

    .equal {                     display:table;                     border-collapse:separate;margin: aut ...

  3. CSS技巧 (1) &#183; 结构和布局

     前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效. 这一篇主要讲 关于 自适应内部元素 的内 ...

  4. 常用前端布局,CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  5. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  6. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. 3行3列表格 table实现,div+css实现

    table实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. CSS技巧 (2) &#183; 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

随机推荐

  1. 【JAVA面试题系列一】面试题总汇--JAVA基础部分

    JAVA基础 基础部分的顺序: 基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法 线程的语法,集合的语法,io 的语法,虚拟机方面的语法 每天几道,持续更新!! 1.一个". ...

  2. SQL Server(八)——触发器

    触发器是一类特殊的存储过程,在对表update,insert或delete语句时自动执行, 没有参数,没有返回值: 一.触发器类型 1.for触发器 在动作执行之后触发(增删改执行完成后,触发器中的代 ...

  3. September 25th 2016 Week 40th Sunday

    Everything is good in its season. 万物逢时皆美好. Don't lose hope. Remeber that even a dog has its day. Onc ...

  4. mysql-advanced-5.6.23-linux-glibc2.5-x86_64安装

    0,二进制安装: mysql-advanced-5.6.23-linux-glibc2.5-x86_64.zip   1,软件包 mysql-advanced-5.6.23-linux-glibc2. ...

  5. php中soap的使用实例以及生成WSDL文件,提供自动生成WSDL文件的类库——SoapDiscovery.class.php类

    1. web service普及: Webservice soap wsdl区别之个人见解 Web Service实现业务诉求:  Web Service是真正“办事”的那个,提供一种办事接口的统称. ...

  6. 【Linux】Zabbix + MPM + msmtp + mutt 监控MySQL + 邮件报警

    Zabbix部署参考博文 http://blog.sina.com.cn/s/blog_5611597901017oe0.html  MPM安装配置参考博文和MPM官网下载地址 http://blog ...

  7. Linux系统备份与还原

    在使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工 具(通常都是私有软件),然后重启电脑进入备份工具提供的 ...

  8. Android声明和使用权限

    Android定义了一种权限方案来保护设备上的资源和功能.例如,在默认情况下,应用程序无法访问联系人列表.拨打电话等.下面就以拨打电话为例介绍一下系统对权限的要求.一般在我们的应用中,如果要用到拨打电 ...

  9. VS2010生成安装包制作步骤

    VS2010生成安装包制作步骤   在VS2010中文旗舰版本中生成winForm安装包,可以复制你电脑中的开发环境,避免你忘记了一下配置然后在别的机器上运行不起来.也省去了Framwork的安装. ...

  10. css布局--垂直居中

    1. 使用table-cell和vertical-align实现垂直居中 html <div class="parent">使用table-cell和vertical- ...