如何使图像浮动在其他定义列表元素的左侧？

如何解决如何使图像浮动在其他定义列表元素的左侧？

| 我如何才能将这些

dd

图像漂浮在

dl

中的

dt

和其他

dd

元素旁边？ 这是我想要的： 这是一个JSfiddle，这是标记：

<dl>
  <dt>Bacon ipsum</dt>
  <dd class=\"img\"><img src=\"http://placekitten.com/100/100\" width=\"100\" height=\"100\" /></dd>
  <dd>Bacon ipsum dolor sit amet pork chop magna pork,tempor in jowl ham labore rump tenderloin pariatur pancetta tri-tip pork loin. Spare ribs meatloaf ground round chicken,non esse cow. </dd>
  <dt>Irure Jowl</dt>
  <dd class=\"img\"><img src=\"http://placekitten.com/101/100\" width=\"100\" height=\"100\" /></dd>
  <dd>Irure jowl non,chicken dolor veniam id in shoulder voluptate. Eu fugiat jowl,sunt drumstick id ad shankle shank aliquip bresaola aliqua reprehenderit. Fugiat shank pariatur strip steak laborum pork chop. Beef ribs aliquip fugiat,shankle id pork loin.  </dd>
  <dt>Biltong labore turkey</dt>
  <dd class=\"img\"><img src=\"http://placekitten.com/100/1002\" width=\"100\" height=\"100\" /></dd>
  <dd>Biltong labore turkey swine dolor short ribs minim. Fugiat beef consectetur,sirloin do ham meatloaf hamburger pariatur jowl swine ham hock.</dd>
</dl>

和CSS：

dt
  { margin: .75em 0 .25em 0;
    font-weight: bold;
    }

dd
  { margin: .25em 0;
    }

dd.img
  { margin: 0 .25em 0 0;
    }

img
  { border: solid #666666 1px;
    padding: 3px;
    }

如果我只是将图像向左浮动，则ѭ1在图像上方；但后来我无法将ѭ1浮动到正确的位置。 进行这种布局的最干净，最语义的方法是什么？     

解决方法

         更新 http://jsfiddle.net/PkwaP/

/* only showing the additions */
body { min-width: 400px; } /* change to appropriate value */
dt { clear: left; margin-left: 116px; }
dd { margin-left: 116px; }
img { float: left; margin-top: -1.25em; margin-right: 10px; }

在dd处添加了margin-left以避免文本在图像上换行。在大多数情况下，向主体添加最小宽度将避免缠绕在dt上。 今晚我不能再花时间在这个问题上。如果仍未解决，我将在早晨再进行一次破解。 祝好运     ,        经过一段时间的努力之后，HTML变成了巨大的红色鲱鱼。 我决定忘记使用

dl

。我做了很多实验，但是我无法提出任何我认为可以接受的东西。因此，我已改为10英镑。 请参阅：http：//jsfiddle.net/8xPRZ/1/ HTML：

<ul>
    <li>
        <img src=\"http://placekitten.com/100/100\" width=\"100\" height=\"100\" />
        <h4>Bacon ipsum</h4>
        <p>Bacon ipsum dolor sit amet pork chop magna pork,tempor in jowl ham labore rump tenderloin pariatur pancetta tri-tip pork  loin. Spare ribs meatloaf ground round chicken,non esse cow.</p>
    </li>

    ..
</ul>

CSS：

li {
    margin: 0 0 .5em 0;
    overflow: hidden;
}
li > img {
    border: solid #666 1px;
    padding: 3px;
    float: left
}
li > h4,li > p {
    overflow: hidden;
    display: block;
    padding: 0 0 0 .5em
}
li > h4 {
    font-weight: bold;
    margin: 0 0 .5em 0
}