html - 图片旁边的 float 列表

Question

可以使用 <ul></ul> 在 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/