图像旁边的浮动列表

Question

可以使用<ul></ul>和<img />在CSS中实现以下布局吗？

|-------------| (li) (li) (li) (li) (li)
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|    image    | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|-------------| (li) (li) (li) (li) (li) 
 (li) (li) (li) (li) (li) (li) (li) (li)
 (li) (li) (li) (li) (li) (li) (li) (li)

JSfiddle ; 我尝试使用float ， inline-block和display:table ，但只要<li>元素的数量超过允许的空间，整个列表就会移动到图像下方。 每次都会随机生成此数字。 可以从1到50不等。

我目前的HTML是：

<img src="" />
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <!-- etc.. -->
</ul>

我得到的最好的布局是使用box-sizing一些padding ：

|-------------| (li) (li) (li) (li) (li)
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|    image    | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|-------------| (li) (li) (li) (li) (li) 
                (li) (li) (li) (li) (li)
                (li) (li) (li) (li) (li)
                (li) (li) (li) (li) (li)

基于CSS3的解决方案被接受。 基于Javascript的解决方案不是。

Answer 1

按照我的理解这样写：

img{
    float:left;
}

ul{
    display:inline;
} 

检查这个http://jsfiddle.net/CFHru/1/

Answer 2

也许尝试将<img>作为<li>元素之一？