Czy naprawdę niemożliwe jest dopasowanie rozmiaru div do zawartości?

88

Chciałbym wyjaśnić, czy możliwe jest dopasowanie elementu div do jego rozmiaru na podstawie rozmiaru zawartości bez konieczności ustawiania elementów pływających lub określania ich pozycji jako bezwzględnej. Czy to możliwe?

html size width Gabriele Cirulli
źródło
Wyobraź sobie, o ile prostsze byłoby tworzenie stron internetowych, gdybyśmy mogli to zrobić! Chcę display: block-inline!! (czyli zachowywać się na zewnątrz jak blok, ale wewnętrznie jako inline - przeciwieństwo inline-block)
ADTC

Odpowiedzi:

139

displayUstawienie CSS

Jest to oczywiście możliwe - weryfikacja koncepcji JSFiddle, w której można zobaczyć wszystkie trzy możliwe rozwiązania:

  • display: inline-block- to jest ten, którego nie jesteś świadomy

  • position: absolute

  • float: left/right

Robert Koritnik
źródło
2
Dziękuję Ci! Nie brałem pod uwagę inline-block!
Gabriele Cirulli
22

Możesz użyć display: inline-block.

Matt Ball
źródło
1
Zaktualizowałem mój dowód koncepcji JSFiddle, który pokazuje również możliwość z position:absolute. Jest to możliwe. Kliknij link w mojej odpowiedzi.
Robert Koritnik
14

Możesz użyć:

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

EDYCJA: Nie, patrz http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

TAKŻE: http://dev.w3.org/csswg/css-box-3/

The_HTML_Man
źródło
Czy to odpowiedź trolla? fit-content nie jest prawidłową wartością właściwości dla szerokości lub wysokości.
Adam
2
Działa, ale musisz ustawić wartość na -webkit-fit-contentlub w -moz-fit-contentzależności od używanej przeglądarki.
warownia1
Dobrze. Nie wiedziałem tego.
The_HTML_Man
4

możesz także użyć

podział słów: łamanie wszystkiego;

kiedy nic nie działa, to działa zawsze;)

meghaM
źródło
1

działa dobrze na Edge i Chrome:

  width: fit-content;
  height: fit-content;
HungNM2
źródło