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>作为<li>元素之一？

图像旁边的浮动列表

2 个答案: