2

我有一个包含图像的框，其中包含 float:left 集和文本内容。

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |       Content             |
|---------                           |
|                                    |
|                                    |
|                                    |
--------------------------------------
                                Fig. 1

我通常认为让内容漂浮在图像周围是件好事。但是，在使用列表的情况下，以下外观很烦人：

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|  3. Item                           |
|  4. Item                           |
|                                    |
--------------------------------------
                                Fig. 2

我宁愿采用以下方式（至少对于相当短的列表，让我们假设现在列表很短）

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|            3. Item                 |
|            4. Item                 |
|                                    |
| Additional content (not in list)   |
--------------------------------------
                                Fig. 3

我通过制作列表得到了上面的外观display: inline-block（或者在列表之前插入一个<br>，或者将它包装在一个块级元素中）

但是，如果有任何长列表项（长于内容字段的小宽度），浮动将被清除。

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |                           |
|---------                           |
| 1. Item                            |
| 2. A very long item, which makes   |
|    the list box just as wide as the|
|    outer box.                      |
| 3. More items                      |
-------------------------------------|
                                Fig. 4

为什么会发生这种情况对我来说似乎很清楚。在浮动环境中，首先将列表呈现为一个块（因为display: inline-block），使用外框的宽度作为环境宽度。由于物品很长，因此生成的块将与外箱一样宽。在第二步中，尝试将块放在浮动图像旁边，它不适合。最后，浮动被清除。

有什么办法可以改变现状吗？比如，首先尝试用较短的宽度渲染列表，如果失败，重新渲染？或者完全不同的方式来实现我想要的？

4

2 回答 2

3

将列表放在 aDIV中，该列表也以定义的宽度向左浮动。

于 2012-09-13T16:33:00.647 回答
1

overflow:hidden在你的清单上尝试一个简单的 - 这应该可以解决问题。

请参阅示例。

于 2012-09-13T16:57:23.340 回答