4

It it possible to achieve the following layout in CSS using a <ul></ul> and an <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; I have tried using float, inline-block and display:table, but whenever the number of <li> elements exceed the allowed space, the whole list is shifted below the image. This number is randomly generated every time. Can vary from 1 to 50.

My current HTML is:

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

The best layout I got was using box-sizing some 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-based solutions are accepted. Javascript-based solutions are not.

4

2 回答 2

6

据我了解这样写：

img{
    float:left;
}

ul{
    display:inline;
}

检查这个http://jsfiddle.net/CFHru/1/

于 2012-05-08T10:14:25.223 回答
0

也许尝试将其<img>作为<li>元素之一？

于 2012-05-08T10:11:25.020 回答