Img + UL 与 CSS 对齐答案

【问题标题】：Img + UL alignment with CSSImg + UL 与 CSS 对齐
【发布时间】：2011-05-21 06:50:49
【问题描述】：

我正在更新旧网站，但遇到了以下简单但已弃用的代码：

<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 浮动到 UL 标记的右侧，但是如果 UL 列表大于图像，则 LI 链接不会像使用不推荐使用的 align 属性时那样在图像下方运行参差不齐.这似乎与我的第二个问题有关，即我必须在 UL 列表上设置宽度，否则这两个元素将不会彼此相邻浮动。有什么办法可以避免必须明确声明 UL 宽度？

【问题讨论】：

你能发布完整的 HTML/CSS 吗？
你所说的“衣衫褴褛”是什么意思？

标签： css image alignment html-lists

【解决方案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>

【讨论】：

就是这样！非常感谢，卢修斯！
不客气！请注意，我使用内联样式来浮动图像只是为了合成：在实际情况下，您可能想要稍微调整一下样式以避免内联样式..

【解决方案2】：

我不完全确定您所说的“衣衫褴褛”是什么意思，但这似乎可行（并且与我从您的“已弃用”代码中可以看到的内容相匹配）：

CSS：

.floatRight {
    float: right;
}
.floatRight img {
    width: 200px;
    height: 200px;
    margin: 0 0 1em 1em;
    background-color: #fff;
}
/* following CSS is, pretty much, just to improve the looks */
a {
    text-decoration: none;
}
li a {
    display: block;
    background-color: #ffa;
}
li:nth-child(odd) a {
    background-color: #fff;
}
li a:hover,
li:nth-child(odd) a:hover {
    color: #000;
    background-color: #eee;
    text-decoration: underline;
}

JS Fiddle demo.

【讨论】：

+ 1 表示样式方面的额外努力..（不要求，但始终欢迎）

【解决方案3】：

保持你的 html 干净。你不需要所有的 div 容器。不要使用元素来清除浮动，这不是语义。为此使用overflow: auto; 技巧。

将您的图片浮动到容器的右侧。容器的内容将围绕它流动。您不必为此浮动内容。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      body{
        width:200px;
        margin: 0px auto;
        overflow: auto; // use this in stead of clearing divs
      }

      img {
        float: right;
        width: 100px;
        height: 100px;
      }
    </style>    
  </head> 

  <body> 
    <img src="thumbnail_image.jpg" alt="thumb"/>

    <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>
    </ul>
  </body>
</html>

【讨论】：

【解决方案4】：

如果你浮动 li 元素本身，你会开始得到你想要的吗？

【讨论】：

【解决方案5】：

问题可能是您将整个 div 浮动到左侧。如果你想让每个 li 元素自己浮动，你可能想试试这个：

div.floatLeft li {
  float:left;
}

【讨论】：