经典图文列表以及CSS布局切换

经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。





列表的HTML构成：
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>  

<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。

下面直接上例子：
值得推荐的图文列表以及CSS布局类型切换

不得不提到一点，如果使用display:inline-block做排列的话，标签换行在Firefox下会引起letter-spacing的bug，如下图：

解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置 letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;

嗯这个效果不错.值得推荐.

这个用dl，dt，dd来做布局似乎更好一些吧。

一个个全都骑到老大头上来了...  

注:偶是女滴,千真万确,毋庸置疑!

我很喜欢,太精彩了

兄弟....表给偶丢丢哦....

额~哦........偶无语

不错.............