JunChen Wu / 标准

CSS 布局应用求助

写于 2007年01月30日 00:26 评论(15)

这是之前在写豆瓣首页教程的文章里面遇到的一个局部布局问题,想不到解决办法。问题如下图:

How to use CSS to render like this

补充两条要求(保证之后不再增加了):

  • Should be work fine in IE6/IE7, Firefox 1.5+
  • Do not use any specific CSS property

在 XHTML Strict 下,Firefox 浏览器内,根据要求,我可以做到大部分效果,除了自适应文字高度。另外,提醒大家一点,5 分钟以内如果没有好办法,就不要再想了。基本上没这个必要。

Warm Regards,
J.

原文地址:http://www.junchenwu.com/2007/01/how_to_use_css_to_render_like_this.html

评论(15)

aaron - 2007年01月30日 08:58

?什么意思~~

solomon - 2007年01月31日 10:05

你提问的点在哪里? 是要那个线之间的空隙 还是整个布局?
另外 表格式数据用表格表现最好

小甲 - 2007年01月31日 10:07

底部对齐只能用table……
之前也遇到过相同的需求……也找不到办法……

JunChen - 2007年01月31日 10:36

to solomon:整个布局。请看完图上的注释。另,你觉得这是表格式数据吗?

to 小甲:对于 inline 对象,可以使用 vertical-align。

old9 - 2007年01月31日 11:50

要是图片和文字都有一个最大限高,就好处理了。

dason - 2007年01月31日 12:34

图片的底端对齐可以用position:absolute;bottom:0px; 但居中就没办法自动居中了

JunChen - 2007年01月31日 12:47

to old9: 那是啊。实际处理我也会这么做,根据实际数据,看大概在哪个范围内。

to dason: 如果使用绝对定位,居中可以多套一些 div 实现。可是我觉得并不好。

dason - 2007年01月31日 13:00

to JunChen: 如何用vertical-align实现底端对齐?img inline后再设置底端对齐似乎没有效果?

JunChen - 2007年01月31日 13:48

to dason: 我不想直接给你解答 :) 网上其实有很多,你搜索 "vertical-align" 看看

dason - 2007年01月31日 15:49

to JunChen: Done! THX~ 又学到一招^^

sunny - 2007年01月31日 17:15

把图片作为背景形式展示就可以了:background:url() bottom center no-repeat;至于显示的图片给隐藏掉display:none;

:)

dason - 2007年01月31日 18:27

赞……这也许是在IE下最好的底端居中显示图片的方法了

JunChen - 2007年01月31日 21:38

to sunny: Great solution! 可惜会添加很多代码并且是内联的 style。另外,文字的等高还是没什么办法阿。

烙饼 - 2007年02月12日 17:33

可以看看淘宝的页面,文字等高是用固定高度来实现的,只是文字要限制长短。其他确实没什么好方法。

cici - 2007年05月18日 17:30

可以固定第一个(一个div),然后其他的都是用相对布局(5个div)
然后6个都放到一个固定的div里

我这么用过,就是自己手算距离,有点麻烦。笨办法,
但是效果没问题

发表评论