以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 Google 广告(AdSense/AdWords) 』   (http://bbs.xml.org.cn/list.asp?boardid=52)
----  网站“床”结构的写法  (http://bbs.xml.org.cn/dispbbs.asp?boardid=52&rootid=&id=78215)


--  作者:zq490391612
--  发布时间:11/15/2009 12:00:00 PM

--  网站“床”结构的写法
网站“床”结构的写法
解释下,所谓的“床”结构就是这样的,呃……因为我比较喜欢睡觉,一看到这个结构我就想起了床,所以就叫他床结构咯:
  下载 (1.88 KB)

2009-10-28 12:40
A1、A2都是A高度变化出来的,例子大家可以期待19楼新版首页,或者淘宝首页的“宝贝类目”这块。

简单点说这其实就是未知高度的垂直居中问题。可是在ie6下我没办法让 t(图中灰色块)有100%的高度。于是基于vertical-align:middle的垂直居中方法就不管用了。

这个写法用到了IeOnly的:writing-mode:tb-rl;这个属性,以及IE6下top:50%能正确定位到当前父容器高度的一半位置(padding-top:50%、margin-top:50%貌似不能得到这里想要的效果)

Demo


可以看到 t 被设置了高度,这个高度应该是介于 t 中文字竖排时候的高度和 A 最小高度之间的。

这中写法适合于不单独定义高度的情况,单独定义高度的话,写法就很多很多了……

标签: 位置高度垂直居中

参照:[URL=http://www.hbchuchen.com]除尘器[/URL] [URL=http://www.hbpingban.com]铸铁平板[/URL] [URL=http://www.zgquanyi.cn]超声波清洗机[/URL]  [URL=http://www.oupukeji.com]测厚仪[/URL] [URL=http://www.czkpdz.com]电采暖炉[/URL] [URL=http://www.botzg.com]螺旋钢管[/URL]  [URL=http://www.mcguanjian.com]弯头[/URL]


W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
2,042.969ms