我有一个包含图像的框，其中包含float：left set和textual contents。
-------------------------------------
|--------- |
|| | |
|| 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），使用外部框的宽度作为环境宽度。由于存在长项目，因此生成的块将与外部框一样宽。在第二步中，尝试将块放在浮动图像旁边，它不适合。最后，浮动被清除。
有没有办法修改这种情况？比如，首先尝试使用较短的宽度渲染列表，如果失败，重新渲染？或者以完全不同的方式实现我想要的目标？
答案 0 :(得分：3)
将列表放在DIV内，该{{1}}也以定义的宽度向左浮动。
答案 1 :(得分：1)
在列表中尝试普通overflow:hidden - 这应该可以解决问题。
请参阅 example 。