Неужели невозможно подогнать размер div под его содержимое?

87

Я хотел бы уточнить, возможно ли сделать div подходящим по размеру на основе размера содержимого без необходимости делать элементы плавающими или делать их положение абсолютным. Является ли это возможным?

html size width Габриэле Чирулли
источник
Представьте, насколько проще был бы веб-разработчик, если бы мы могли это сделать! Хочу display: block-inline!! (то есть вести себя внешне как блок, а внутри как встроенный - противоположность inline-block)
ADTC

Ответы:

138

displayНастройка CSS

Конечно, это возможно - доказательство концепции JSFiddle, где вы можете увидеть все три возможных решения:

  • display: inline-block- это тот, о котором вы не знаете

  • position: absolute

  • float: left/right

Роберт Коритник
источник
2
Спасибо! Я не думал о встроенном блоке!
Габриэле Чирулли
22

Вы можете использовать display: inline-block.

Мэтт Болл
источник
1
Я обновил свое доказательство концепции JSFiddle, которое также показывает возможность использования position:absolute. Вполне возможно. Щелкните ссылку в моем ответе.
Роберт Коритник
14

Ты можешь использовать:

width: -webkit-fit-content;
height: -webkit-fit-content;
width: -moz-fit-content;
height: -moz-fit-content;

РЕДАКТИРОВАТЬ: Нет. См. Http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

ТАКЖЕ: http://dev.w3.org/csswg/css-box-3/

The_HTML_Man
источник
Это тролльский ответ? fit-content не является допустимым значением свойства для ширины или высоты.
Адам
2
Это работает, но вы должны установить значение -webkit-fit-contentили в -moz-fit-contentзависимости от используемого вами браузера.
warownia1 05
ОК. Я этого не знал.
The_HTML_Man
4

вы также можете использовать

слово-разрыв: сломать все;

когда ничего не работает, это работает всегда;)

мегам
источник
1

он хорошо работает в Edge и Chrome:

  width: fit-content;
  height: fit-content;
HungNM2
источник