É realmente impossível fazer um div ajustar seu tamanho ao conteúdo?

87

Gostaria de esclarecer se é possível ou não fazer um div caber em seu tamanho com base no tamanho do conteúdo sem ter que fazer os elementos flutuarem ou ter que tornar sua posição absoluta. É possível?

html size width Gabriele Cirulli
fonte
Imagine o quão mais simples o desenvolvimento da web seria se pudéssemos fazer isso! Eu quero display: block-inline!! (que deve se comportar externamente como um bloco, mas internamente como um inline - o oposto de inline-block)
ADTC de

Respostas:

138

displayConfiguração CSS

É claro que é possível - prova de conceito JSFiddle, onde você pode ver todas as três soluções possíveis:

  • display: inline-block- este é o que você não está ciente

  • position: absolute

  • float: left/right

Robert Koritnik
fonte
2
Obrigado! Eu não havia considerado o bloqueio embutido!
Gabriele Cirulli
22

Você pode usar display: inline-block.

Matt Ball
fonte
1
Atualizei minha prova de conceito JSFiddle que também mostra a possibilidade com position:absolute. É bem possível. Clique no link em minha resposta.
Robert Koritnik
14

Você pode usar:

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

EDIT: Não. Veja http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

TAMBÉM: http://dev.w3.org/csswg/css-box-3/

The_HTML_Man
fonte
Esta é uma resposta troll? fit-content não é um valor de propriedade válido para largura ou altura.
Adam
2
Funciona, mas você deve definir o valor como -webkit-fit-contentou -moz-fit-contentdependendo do navegador que usar.
warownia1
Está bem. Eu não sabia disso.
The_HTML_Man
4

você também pode usar

quebra de palavra: quebra de tudo;

quando nada parece funcionar, isso sempre funciona;)

meghaM
fonte
1

funciona bem no Edge e Chrome:

  width: fit-content;
  height: fit-content;
HungNM2
fonte