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

Answer 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

Answer 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>

Answer 4

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

Answer 5

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

div.floatLeft li {
  float:left;
}

与CSS的Img + UL对齐

5 个答案: