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

Question

如何在dd中的dt和其他dd元素旁边展示这些dl张图片？

这是我想要的：

Here is a 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;
    }

如果我只是向左浮动图像，dt位于图像上方;但是我无法将dt漂浮到正确的位置。

进行此类布局的最干净，最语义的方法是什么？

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

今晚我不能再花这么多时间讨论这个问题了。如果它没有解决，我会在早上再接受一次破解。

祝你好运

Answer 2

在与你的HTML大量红鲱鱼挣扎了一段时间之后..

我决定忘记使用dl。我做了很多实验（很多），但我无法想出任何我认为可以接受的东西。所以，我已经改为ul。

请参阅： 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
}