圖像旁邊的浮動列表

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：

基於CSS3

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

解決方案被接受。基於Javascript的解決方案不是。

Answer 1

按我理解這樣寫：

img{ 
    float:left; 
} 

ul{ 
    display:inline; 
} 

入住這http://jsfiddle.net/CFHru/1/

Answer 2

也許嘗試將<img>作爲<li>元素之一？