当前位置:  编程技术>WEB前端

像table一样布局div

    来源: 互联网  发布时间:2014-09-06

    本文导语:  http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个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的结构:







很简单不用解释就能看懂,但是这里给出一个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经过测试均可以完美显示.

至此整个任务就结束了。

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.table类jtableheader的类成员方法: table定义及介绍
  • mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table定义及介绍
  • 我在table中选中一行删除后,数据库中是删除了,但我的table中这一行还显示,我怎么让他不显示??
  • java命名空间javax.accessibility类accessiblerole的类成员方法: table定义及介绍
  • 用new JTalbe(10, 20)创建了一个table,如何设置该table列(column)的宽度
  • java命名空间javax.swing.plaf.basic类basictableui的类成员方法: table定义及介绍
  • 請問在一個分成上下兩個框架的整個頁面中,上面框架是包含一個form的form.jsp頁面,下面框架則是包含table的另一table.jsp頁面,當按下fo
  • java命名空间javax.swing.text.html类html.tag的类成员方法: table定义及介绍
  • GTK编程~我在hpanel里加了一个4*1table~里面放了四个button~怎么设置可以使四个button之间有一定的距离~设置table 的边框么?请教下怎么让app的界面固定~不能最大化
  • java命名空间javax.swing.table类jtableheader的类成员方法: gettable定义及介绍
  • Table Library
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table_header定义及介绍
  • 困惑很久的问题,一个实体BEAN只能对应一个TABLE吗?如果有几百个TABLE,难道要写几百个实体BEAN?
  • java命名空间javax.sql.rowset.spi类syncprovider的类成员方法: datasource_table_lock定义及介绍
  • IP Tables State
  • java命名空间javax.swing.table类jtableheader的类成员方法: getcolumnmodel定义及介绍
  • 关于定死table宽度
  • java命名空间javax.swing.table类tablecolumn的类成员方法: identifier定义及介绍
  • 运行insmod ip_tables后,reboot后又无效了?
  • java命名空间javax.accessibility类accessiblecontext的类成员方法: accessible_table_model_changed定义及介绍
  • Table Scroller


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3