Ist es wirklich unmöglich, ein Div seiner Größe an seinen Inhalt anzupassen?

87

Ich möchte klarstellen, ob es möglich ist, ein Div basierend auf der Größe des Inhalts an seine Größe anzupassen, ohne dass Elemente schweben müssen oder ihre Position absolut sein muss. Ist es möglich?

html size width Gabriele Cirulli
quelle
Stellen Sie sich vor, wie viel einfacher Webentwickler gewesen wären, wenn wir dies tun könnten! Ich will display: block-inline!! (das heißt, sich äußerlich als Block, aber innerlich als Inline zu verhalten - das Gegenteil von inline-block)
ADTC

Antworten:

138

CSS- displayEinstellung

Es ist natürlich möglich - JSFiddle Proof of Concept, bei dem Sie alle drei möglichen Lösungen sehen können:

  • display: inline-block- Dies ist derjenige, den Sie nicht kennen

  • position: absolute

  • float: left/right

Robert Koritnik
quelle
2
Vielen Dank! Ich hatte nicht über Inline-Block nachgedacht!
Gabriele Cirulli
22

Sie können verwenden display: inline-block.

Matt Ball
quelle
1
Ich habe meinen Proof of Concept JSFiddle aktualisiert, der auch die Möglichkeit mit zeigt position:absolute. Es ist auch möglich. Klicken Sie auf den Link in meiner Antwort.
Robert Koritnik
14

Sie können verwenden:

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

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

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

The_HTML_Man
quelle
Ist das eine Trollantwort? fit-content ist kein gültiger Eigenschaftswert für Breite oder Höhe.
Adam
2
Es funktioniert, aber Sie müssen den Wert auf -webkit-fit-contentoder -moz-fit-contentabhängig vom verwendeten Browser einstellen .
Warownia1
OK. Das wusste ich nicht.
The_HTML_Man
4

Sie können auch verwenden

Wortumbruch: Allesumbruch;

wenn nichts zu funktionieren scheint funktioniert das immer;)

MeghaM
quelle
1

es funktioniert gut auf Edge und Chrome:

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