Est-il vraiment impossible d'adapter sa taille à son contenu?

87

Je voudrais préciser s'il est possible ou non de faire en sorte qu'un div s'adapte à sa taille en fonction de la taille du contenu sans avoir à faire flotter les éléments ou à rendre leur position absolue. C'est possible?

html size width Gabriele Cirulli
la source
Imaginez à quel point le développement Web aurait été plus simple si nous pouvions faire cela! Je veux display: block-inline!! (c'est-à-dire se comporter extérieurement comme un bloc mais intérieurement comme un inline - le contraire de inline-block)
ADTC

Réponses:

138

CSS displaycadre

C'est bien sûr possible - Preuve de concept JSFiddle où vous pouvez voir les trois solutions possibles:

  • display: inline-block- c'est celui dont vous n'êtes pas au courant

  • position: absolute

  • float: left/right

Robert Koritnik
la source
2
Merci! Je n'avais pas envisagé de bloquer en ligne!
Gabriele Cirulli
22

Vous pouvez utiliser display: inline-block.

Matt Ball
la source
1
J'ai mis à jour ma preuve de concept JSFiddle qui montre également la possibilité avec position:absolute. C'est aussi bien possible. Cliquez sur le lien dans ma réponse.
Robert Koritnik
14

Vous pouvez utiliser:

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

EDIT: Non, voir http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

AUSSI: http://dev.w3.org/csswg/css-box-3/

The_HTML_Man
la source
Est-ce une réponse de troll? fit-content n'est pas une valeur de propriété valide pour la largeur ou la hauteur.
Adam
2
Cela fonctionne mais vous devez définir la valeur sur -webkit-fit-contentou -moz-fit-contentselon le navigateur que vous utilisez.
warownia1
D'accord. Je ne savais pas ça.
The_HTML_Man
4

vous pouvez aussi utiliser

mot-break: break-all;

quand rien ne semble fonctionner, cela fonctionne toujours;)

méghaM
la source
1

cela fonctionne bien sur Edge et Chrome:

  width: fit-content;
  height: fit-content;
HungNM2
la source