画像の横に浮動リスト

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; Iはfloat、inline-blockとdisplay:tableを使用して試みたが、<li>要素の数が許容スペースを超えるたびに、リスト全体を画像の下にシフトされます。この番号は毎回ランダムに生成されます。

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

私はいくつかのpaddingbox-sizingを使用していた得た最高のレイアウト：

|-------------| (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ベースのソリューションが受け入れている私の現在のHTMLがある

1から50に変わることができます。 JavaScriptベースのソリューションはそうではありません。

Answer 1

私はこのように書く理解あたりとして：

img{ 
    float:left; 
} 

ul{ 
    display:inline; 
} 

チェックこのhttp://jsfiddle.net/CFHru/1/

Answer 2

たぶん<li>要素の一つとして<img>を入れてみては？