html – 图像旁边的浮动列表

概述可以使用< ul>< / ul>在CSS中实现以下布局：和< img /> ？ |-------------| (li) (li) (li) (li) (li)| | (li) (li) (li) (li) (li) | | (li) (li) (li) (li) (li) | | (li) (li) (li) (li) 可以使用< 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一些填充：

|-------------| (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的解决方案不是.

解决方法 按照我的理解这样写：

img{    float:left;}ul{    display:inline;}

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

总结

以上是内存溢出为你收集整理的html – 图像旁边的浮动列表全部内容，希望文章能够帮你解决html – 图像旁边的浮动列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。