经常碰到图文列表的排列,怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计,总结出一点小经验和技巧。
[img]http://dl.iteye.com/upload/attachment/208460/78e91228-4542-3c3f-a4fb-0d0e6a6fa121.jpg[/img]
列表的HTML构成:
在列表布局中,我们经常会选用float属性来实现横向排列,要实现每一行都整齐排列,我们必须固定列表项的高度,否则会发生意想不到的混乱表现。但实际应用中,图片不一定都同尺寸,按比例来表现势必会与我们固定列表高度或宽度相驳,也许还有图片底边对齐的要求。为了实现这种效果,这里用到了ie6不支持的display:inline-block;ie通过使用 “display:inline;zoom:1”来hack。
下面直接上例子:
[url=http://www.microidc.com/demo/general-list-layout/]值得推荐的图文列表以及CSS布局类型切换[/url]
不得不提到一点,如果使用display:inline-block做排列的话,标签换行在Firefox下会引起letter-spacing的bug,如下图:
[img]http://dl.iteye.com/upload/attachment/208462/80f2ba65-0ccc-38cb-8814-212e1c59b698.png[/img]
letter-spacing-bug.png
解决方法是通过将排列元素(例子中是li)的父层(例中ul)设置 letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;
[img]http://dl.iteye.com/upload/attachment/208460/78e91228-4542-3c3f-a4fb-0d0e6a6fa121.jpg[/img]
列表的HTML构成:
<pre>
<div class="box">
<ul>
<li>
<div class="item">
<a href="url"><img src="src" alt=""/></a>
<h3><a href="url">TITLE</a></h3>
<p>Description</p>
</div>
</li>
... items ...
</ul>
</div>
在列表布局中,我们经常会选用float属性来实现横向排列,要实现每一行都整齐排列,我们必须固定列表项的高度,否则会发生意想不到的混乱表现。但实际应用中,图片不一定都同尺寸,按比例来表现势必会与我们固定列表高度或宽度相驳,也许还有图片底边对齐的要求。为了实现这种效果,这里用到了ie6不支持的display:inline-block;ie通过使用 “display:inline;zoom:1”来hack。
下面直接上例子:
[url=http://www.microidc.com/demo/general-list-layout/]值得推荐的图文列表以及CSS布局类型切换[/url]
不得不提到一点,如果使用display:inline-block做排列的话,标签换行在Firefox下会引起letter-spacing的bug,如下图:
[img]http://dl.iteye.com/upload/attachment/208462/80f2ba65-0ccc-38cb-8814-212e1c59b698.png[/img]
letter-spacing-bug.png
解决方法是通过将排列元素(例子中是li)的父层(例中ul)设置 letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;