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

Пробовал float: left, но в данном случае это работает только в IE и Opera.

Как есть


Как хотелось бы — работает в IE и Opera с float: left


При размещении изображений если оно не помещается, то переносится на следующую строку, при этом в том месте, где изображение не поместилось образовывается пустота, блок остаётся растянутым на всю ширину.
  • Вопрос задан
  • 110781 просмотр
Пригласить эксперта
Ответы на вопрос 10
Mithgol
@Mithgol
Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока. Рекомендую для этой цели использовать нижеследующий код строчного блока, вполне испытанный многомесячным применением его в одном из основных CSS-файлов в «Традиции», русской энциклопедии:
/*  {{Строчный блок}}
 *  http://habrahabr.ru/blogs/css/96152/
 *  ↑ http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
 *    ↑ http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
 *      ↑ первоисточник
*/
.lineBlock {
   border: 0; margin: 0.3em 0.15em; padding: 0;
 
   display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
   display: inline-block;
   vertical-align: top;
 
   /* ↓ IE6 & IE7 «hasLayout» voodoo */
   zoom: 1;
   *display: inline;
   /* ↑ IE6 & IE7 starhack ← http://www.ejeliot.com/blog/63 */
}

Как видите, этот код составлен по принципам, обеспечивающим обратную совместимость с Firefox 2 и IE 6 и 7.

Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым CSS-кодом.
Ответ написан
crazzyDemon
@crazzyDemon
web developer
попробуйте вместо дива спан со свойством display:inline-block;
Ответ написан
@Lici
display: inline-block;

всего то ;)
Ответ написан
Комментировать
dmomen
@dmomen
Javascript?
Ответ написан
Комментировать
@Naps
www.artlebedev.ru/tools/technogrette/html/thumbnails-center/

Кажись оно, только у вас даже проще.
Ответ написан
Комментировать
Vlad911
@Vlad911
А высоту пробовали задавать?
Ответ написан
RazoR_Empire
@RazoR_Empire
Блин, и у меня похожая проблема =(
Ответ написан
Комментировать
min-width:0;

Только в IE6 не прокатит
Ответ написан
SwampRunner
@SwampRunner
float:left; overflow:hidden;
а для нижних блоков clear:left;
Ответ написан
Комментировать
badgoto
@badgoto
Extjs кодер
Я бы хотел дополнить вопрос https://jsfiddle.net/badgoto/b0z9samx/ , здесь "@@@" не прилегает к тексту, ширина дива 'content' больше, чем хотелось бы. word-break: break-all - не подходит по условию задачи.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы