CSS 布局应用求助
写于 2007年01月30日 00:26 评论(15)
这是之前在写豆瓣首页教程的文章里面遇到的一个局部布局问题，想不到解决办法。问题如下图：
补充两条要求（保证之后不再增加了）：
- Should be work fine in IE6/IE7, Firefox 1.5+
- Do not use any specific CSS property
在 XHTML Strict 下，Firefox 浏览器内，根据要求，我可以做到大部分效果，除了自适应文字高度。另外，提醒大家一点，5 分钟以内如果没有好办法，就不要再想了。基本上没这个必要。
Warm Regards,
J.
J.
原文地址：http://www.junchenwu.com/2007/01/how_to_use_css_to_render_like_this.html
评论(15)
？什么意思~~
你提问的点在哪里？ 是要那个线之间的空隙 还是整个布局？
另外 表格式数据用表格表现最好
底部对齐只能用table……
之前也遇到过相同的需求……也找不到办法……
to solomon：整个布局。请看完图上的注释。另，你觉得这是表格式数据吗？
to 小甲：对于 inline 对象，可以使用 vertical-align。
要是图片和文字都有一个最大限高，就好处理了。
图片的底端对齐可以用position:absolute;bottom:0px; 但居中就没办法自动居中了
to old9: 那是啊。实际处理我也会这么做，根据实际数据，看大概在哪个范围内。
to dason: 如果使用绝对定位，居中可以多套一些 div 实现。可是我觉得并不好。
to JunChen: 如何用vertical-align实现底端对齐？img inline后再设置底端对齐似乎没有效果？
to dason: 我不想直接给你解答 :) 网上其实有很多，你搜索 "vertical-align" 看看
to JunChen: Done! THX~ 又学到一招^^
把图片作为背景形式展示就可以了：background:url() bottom center no-repeat;至于显示的图片给隐藏掉display:none;
：）
赞……这也许是在IE下最好的底端居中显示图片的方法了
to sunny: Great solution! 可惜会添加很多代码并且是内联的 style。另外，文字的等高还是没什么办法阿。
可以看看淘宝的页面，文字等高是用固定高度来实现的，只是文字要限制长短。其他确实没什么好方法。
可以固定第一个（一个div），然后其他的都是用相对布局(5个div)
然后6个都放到一个固定的div里
我这么用过，就是自己手算距离，有点麻烦。笨办法，
但是效果没问题