Как сделать ширину блока по содержимому css

Ширина блока по содержимому

Здравствуйте. Все не могу сделать ширину блока по содержимому, прошу вашей помощи.

Автоширина блока по содержимому
Можно как то блок чтобы ширина растягивалась? <html> <head> <title>title</title> </head>.

Высота блока по содержимому
Есть div. в нём p и img. img справа. как сделать так, чтобы float: right не убирал изображение из.

Высота блока по содержимому
Подскажите как сделать высоту .item по высоте контента в нем. <div <div.

Ширина div по контенту

Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block; , но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.

Эту задачу можно решить несколькими способами:

1 — С помощью display: inline-block; :

2 — С помощью display: block; :

Используя float , не забывайте про clear: both

3 — С помощью display: inline-flex; :

4 — С помощью display: table; :

И блоки, и флексы, и таблицы могут оборачивать блок по его ширине. В зависимости от вашей общей задачи, вы можете выбрать самый подходящий вам вариант.

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

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

Как есть

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

При размещении изображений если оно не помещается, то переносится на следующую строку, при этом в том месте, где изображение не поместилось образовывается пустота, блок остаётся растянутым на всю ширину.

  • Вопрос задан более трёх лет назад
  • 106523 просмотра
  • Facebook
  • Вконтакте
  • Twitter

Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока. Рекомендую для этой цели использовать нижеследующий код строчного блока, вполне испытанный многомесячным применением его в одном из основных русской энциклопедии:

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

Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *