专栏首页菩提树下的杨过[转自blueidea]像table一样布局div Ⅰ

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS

原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

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

至此整个任务就结束了,请在非IE浏览器下 预览模型效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • winform中linkLabel的用法(示例)

    private void Form1_Load(object sender, EventArgs e)         {             this...

    菩提树下的杨过
  • 纯CSS3实现loading虚影加载效果

    从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执...

    Javanx
  • 图解数据库内连接、外连接、左连接、右连接、全连接等

    用两个表(a_table、b_table),关联字段a_table.a_id和b_table.b_id来演示一下MySQL的内连接、外连接( 左(外)连接、右(...

    浩Coding
  • 你真的了解Java中的位操作?

    joymufeng
  • 各个版本Linux单节点伪分布安装CDH5.1.X及提交wordcount到yarn高可靠文档

    问题导读: 1.安装cdh5伪分布配置文件在什么位置? 2.不同的操作系统,cdh5的安装过程都包含哪些流程? 3.在yarn上运行wordcount都需要哪...

    用户1410343
  • 解决浏览器缩小布局变乱问题

    在编写pc端网页的时候我遇到了一个问题,就是我采用float浮动布局时,当浏览器缩小,发现布局乱了。通过仔细测试,我找到了解决的办法。

    无邪Z
  • 今天用JAVA来写个爬虫!其实也不难!

    这篇文章其实是我很早之前就写好了的,这次重新整理一下。Java写爬虫可能很多朋友没有去试过,可能是由于这方面的资料比较少,也可能是Python写爬虫过于的...

    Python进击者
  • 区块链Block创建时间

    区块时间获取 无论BTC系列的区块还是ETH系列的区块,区块创建的时间存储单位都是unix时间戳。单位是秒而不是毫秒,这是我们在使用时必须注意的,如果直接用它来...

    用户1161110

扫码关注云+社区

领取腾讯云代金券