Как сделать так, чтобы промежуток был настолько широким, насколько изображение внутри него?

Question

У меня есть span, обертывающий элемент img и другой элемент span, который используется для описания изображения. Я хочу, чтобы изображение было сверху, а затем немного текста под изображением. Я нашел способ, используя специфичные для Firefox свойства CSS, но это не будет работать на любом другом браузере. Есть ли другой способ получить этот эффект или подражать тому, как он выглядит в Firefox?

HTML:

 <span class="image">
   <img class="" alt="pic" src="pic.jpg" />
     <span class="img-desc">
       Call us today!
       <span>888-888-8888</span>
     </span>
  </span>

CSS:

 .image {
    float: right;
    width: -moz-min-content;
}

Answer 1

Вы можете сделать это с помощью CSS, очистив элемент изображения.Как только изображение очищено, вы можете всплыть .img-desc (влево или вправо), который будет помещен под изображением.Это должно работать для любой ширины изображения.В моем примере я только что использовал изображение по умолчанию с шириной 50 пикселей.

http://jsfiddle.net/2KANB/

Answer 2

Измените все ваши <span> на <div>, и это будет работать. Это связано с тем, что по умолчанию <div> (уровень блока) вызывает разрывы строк до и после себя, а <span> (inline) - нет.

http://jsfiddle.net/TbY4N/

<span> были разработаны для «встроенного» использования, и, как правило, вы не должны видеть их, содержащих кучу других тегов или элементов уровня блока. Хотя вы можете легко заставить их вести себя как <div> (уровень блока), это проблема правильной семантики.

Span против Div в соответствии со статьей W3C Wiki ...

"Элемент div , короткий для деления, является общим уровнем блока контейнер. Обычно используется для обтекания другого уровня блока элементы , чтобы сгруппировать их (см. следующий раздел для более исследование этого). Он также может быть использован для сбора вместе куча встроенных элементов и / или текста, которые иначе не логически помещается под другой элемент уровня блока, но это должно быть последним курорт. "

"Элемент span является общим контейнером inline level . Он также помогает проинформировать структуру документа, но используется для группировки или обернуть другие встроенные элементы и / или текст, а не на уровне блока элементы."

Answer 3

<span class="image">
 <img class="" alt="pic" src="pic.jpg" />
  <br />
  <span class="img-desc">
   Call us today!
   <br />
   <span>888-888-8888</span>
  </span>
</span>