Блог

У меня есть некоторый HTML, который выглядит следующим образом: http://jsfiddle.net/KbqHa /

Я бы хотел, чтобы это div было в той же строке, что и изображение. Однако он перемещается на строку ниже из-за того, что div является блочным элементом. В этом случае я обычно использую a <span> , но это полностью портит границу (и div обертки под изображением тоже). Добавление display:inline-block к div , похоже, тоже не работает. Я пробовал использовать float: left , но я тоже не могу заставить это работать. Есть мысли?

Классическое решение — использовать float: left на img , а затем добавить a margin-left к div , равному ширине изображения.

Смотрите: http://jsfiddle.net/thirtydot/KbqHa/2 /

Однако это бесполезно, если ширина изображения неизвестна.

Итак, лучшим решением является использование overflow: hidden на div .

См.: http://jsfiddle.net/thirtydot/KbqHa/3/

Причина, по которой это, казалось бы, бессмысленное решение работает, объясняется здесь .