用div实现像table一样的布局方法

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

如何像表格table一样对层div进行轻松布局

  下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧。  许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就...
  • yeyu712
  • yeyu712
  • 2006年10月03日 10:03
  • 598

html5 div布局与table布局

div布局:html+css实现简单布局。 #container中height不能写成百分数,必须为具体高度。 div布局 body{ ...
  • csdn9_14
  • csdn9_14
  • 2016年11月15日 21:36
  • 1270

html -- div table布局 -- 加 布局简单例子

html --div table布局
  • yongaini10
  • yongaini10
  • 2016年09月02日 22:32
  • 4926

HTML5 的div与table的两种布局

用html5的 与生成常见的网页布局。
  • u013595878
  • u013595878
  • 2014年12月17日 19:27
  • 1588

利用PHP开发的微信公共平台游戏

一直想利用微信公告平台提供的接口开发一个文字类型游戏,但是苦于没有什么点子,知道看到redraiment在OSChina上托管的微信游戏--开窗,让我觉得我也可以完成此类文字游戏的开发.redraim...
  • txg703003659
  • txg703003659
  • 2014年05月29日 10:21
  • 4239

DIV+CSS布局和Table布局对比

转自:http://www.toutiao.com/i6429288122151862786/ 虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Ta...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年06月14日 19:42
  • 627

DIV+CSS和Table区别

众所周知,这(DIV+CSS和Table)两种语句都经常被开发人员使用了来控制界面显示,但是这两种语法也有很大的不同,下面分别从这两种语句的优缺点进行分析: 一、制作效率 我想...
  • lurao
  • lurao
  • 2016年05月11日 23:27
  • 2731

练习项目 一款新闻app的开发 (四):通过RecyclerView来展示新闻列表

接下来整理下以下功能: 1. 通过RecyclerView来展示新闻列表。 2. 根据不同的Item选项来展示不同的布局。 3. 在RecyclerView的基础上实现上拉刷新和下拉加载更多 最终...
  • u010057965
  • u010057965
  • 2017年10月12日 16:38
  • 268

像table一样布局div

  • zgqtxwd
  • zgqtxwd
  • 2008年04月30日 22:35
  • 135

HTML,使用div+css实现自适应table布局

简单的table布局:     1:使用 box-sizing以便于使用100%;     2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度 ...
  • okkk
  • okkk
  • 2016年07月30日 18:16
  • 4967
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用div实现像table一样的布局方法
举报原因:
原因补充:

(最多只允许输入30个字)