列表项叠加在浮动图像上

Question

我已经为这个问题摸不着头脑好几次了，我想不通。

这是代码：

<div class='imgpos_5'>
    <a href='http://jonaseklundh.se'>
        <img src='http://jonaseklundh.se/bilder/icons/archive.png' width=50 height=50>
    </a>
</div>
<ol>
    <li>List item that is quite long and will wrap when reacing the image
    <li>List item
    <li>List item
    <li>List item
</ol>

与CSS:

.imgpos_5 {
    float: right;
}

(JSFiddle: https://jsfiddle.net/5q9zo4te/) 但是列表项覆盖在图像上，使 link 无法正常工作。您只能单击没有列表项跨越它的图像 link - 但列表项的内容已正确包装。我该如何解决这个问题？

(编辑：imgpos_5 div 的实际 percentage/pixel 宽度代码未知，它可以包含多个图像，全部向右浮动。代码不能硬-编码 imgpos_5 或 OL 标签的宽度）

Answer 1

clear: both <ul>:

ol {clear: both;}

或者，给定宽度并浮动 <ul>:

.imgpos_5 {float: right; width: 40%;}
ol {float: left; width: 40%;}

Answer 2

.imgpos_5 {
  float: right;

}
.listItem {
  float: left;
  margin: 0;
  padding: 0;
}

<div class='imgpos_5'>
  <a href='http://jonaseklundh.se'>
    <img src='http://jonaseklundh.se/bilder/icons/archive.png' width=50 height=50>
  </a>
</div>
<ol class="listItem">
  <li>List item that is quite long and will wrap when reacing the image</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

列表项叠加在浮动图像上

List items overlay on floated image

html

css

css-float