当前位置:主页 > 服务器管理 > 正文

Html技巧-简单的把Table转成Div

 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。

先看看xhtml的结构:

  1. <div class="equal">  
  2. <div class="row">  
  3. <div class="one"></div>  
  4. <div class="two"></div>  
  5. <div class="three"></div>  
  6. </div>  
  7. </div>  

很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似:

  1. <table> 
  2. <tr> 
  3. <td></td> 
  4. <td></td> 
  5. <td></td> 
  6. </tr> 
  7. </table> 

下来是css:

  1. .equal { 
  2. display:table; 
  3. border-collapse:separate; 
  4. .row { 
  5. display:table-row; 
  6. .row div { 
  7. display:table-cell; 
  8. .row .one { 
  9. width:200px; 
  10. .row .two { 
  11. width:200px; 
  12. .row .three { 
  13.  

解释:

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经过测试均可以完美显示.

版权保护: 本文由 主页 原创,转载请保留链接: http://www.top.kim/fuwuqi/10.html

博客主人topkim
域名投资铁定律
第一,一定要选择大注册局的后缀。
第二,一定要选择三位顶级后缀。
第三,一定要选择备案的后缀。
第四,一定要选择资源多的后缀。
第五,一定要选择,适合终端运营建站的后缀,
网站运营人
   网站运营没有一个固定的规则,网站运营应该根据公司核心需要蝶变成不同的运营方式,我不是很认可公司依托百度运营为主,我认为依托百度的推广不是最佳的策略,苦苦运营多少年都始终依托在别人的控制之下这样的运营没有创新。不管是PC端流量,还是手机端流量,微信端流量,APP流量,品牌建设也好,他们并不复杂,复杂的是制定好运营思路,让其落实执行下去,复杂的是不要建立在现有的运营知识结构下止步不前,而是不断入微的观察发现新的趋势,新的有效的运营方法并且应用到公司项目上,复杂的是研究透竞争公司的运营体系,把他的长处拓展到自己公司的运用体系上。一家,两家,三家,只要你认真研究行业里做的最好的前三家行业竞争对手的系统并把其长处拓展移植过来,你不想成为行业NO.1都很困难,永远记住,别人有的,我也有,别人没有的我也有。用坚定的韧性去执行项目落地,永远要比别人多一分。这就是我多年的核心运营秘密,凭借这个我曾经一不小心在很短的时间内把网站运用到8000多世界排名,因为达到了这么高的成绩,我马上换了新的挑战,又把全国顶级难度的关键词优化到了首页达到后我又换了新的工作。再后来我坚持一个项目达8年,回首过去,原来我做出的世界排名前8000的成绩,后面的接任者根本镇守不住(后来公司老总联系我分析原因,我一看我做的工作架构都让他们改变了,连我创造的架构都毁,我也没在做分析原因),原来我优化到首页的关键词,(我离开公司时,曾经指导公司3个月,即便这样,时间久了他们还是忘记了我的叮嘱)我知道,我做出来的成绩很少有人能够守住,我觉的我的职业生涯给别人添了麻烦,为什么我帮公司做出成绩却不帮公司守住成绩?一个完善的职业经历应该是做的出来,还要守得住!
  • 文章总数
  • 20256访问次数
  • 建站天数
  • 标签

    友情链接