Блог

Как я могу получить эти dd изображения, размещенные рядом с dt и другими dd элементами в dl ?

Вот что я хотел бы:

Вот 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 в правильное положение.

Какой самый чистый и семантичный способ сделать этот тип макета?

Обновлено
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, чтобы избежать переноса текста на изображение. добавление минимальной ширины к телу в большинстве случаев позволит избежать переноса на dt.

Я не могу больше тратить время на этот вопрос сегодня вечером. Если это не будет решено, я попробую еще раз разобраться с этим утром.

Удачи

После некоторой борьбы с огромным отвлекающим маневром, которым был ваш 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
}