css - Img + UL 与 CSS 对齐

Question

我正在更新一个旧站点，我遇到了以下简单但已弃用的代码:

<img src="thumbnail_image.jpg" align="right">

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

此代码允许无序列表在图像上参差不齐，然后在图像下方运行，占据包含两个元素的父容器的宽度。在尝试在 CSS 中重新创建此效果时，以下是我最接近获得相同效果的方法。

<div class="floatRight">
<img src="thumbnail_image.jpg">
</div>

<div class="floatLeft">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>

<div class="clear"></div>

此解决方案允许我将 thumbnail_image float 到 UL 标记的右侧，但是如果 UL 列表大于图像，则 LI 链接不会像使用已弃用的对齐属性时那样在图像下方运行参差不齐.这似乎与我的第二个问题有关，我必须在 UL 列表上设置宽度，否则这两个元素将不会彼此相邻 float 。有什么办法可以避免必须明确说明 UL 宽度？

Answer 1

你不需要向左浮动 UL，只需要向右浮动图像，所以摆脱 floatLeft 类。你甚至不一定需要将图像放在 div 中，你可以简单地向右浮动图片本身:

<img src="scompenso.jpg" style="float: right;">
<div>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>