html - 画像の横にあるフローティングリスト

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>の1つとしてを入れてみてください。<li>