图像旁边的浮动列表

Question

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

|-------------| (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/