使用一个<ul>的多列列表 - 需要上面的图像</ul>

Question

我使用了CSS Wizadry http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

中的代码

基本上它只用一个UI创建多个列。

我只需要在Html / CSS中创建的单独的图像/内容区域之上。如下所示：

因此，它将在上面显示一个图像 - 然后在下面显示一列。 很简单，但我非常不喜欢

Html在这里：

    <code><ul id="triple"> <span class="code-comment">
</span>
  <li>Text here</li>

</ul></code>

css：

   <code>ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}

#triple li  { width:33.333%; } <span class="code-comment">/* 3 col */</span>

提前致谢！