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

138

CSS- `display`Einstellung

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

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

CSS- displayEinstellung

CSS- `display`Einstellung