Apakah benar-benar tidak mungkin untuk membuat div sesuai ukurannya dengan isinya?

88

Saya ingin mengklarifikasi apakah memungkinkan atau tidak untuk membuat div sesuai dengan ukurannya berdasarkan ukuran konten tanpa harus membuat elemen mengambang atau harus membuat posisinya menjadi absolut. Apa itu mungkin?

html size width Gabriele Cirulli
sumber
Bayangkan betapa sederhananya pengembang web jika kita bisa melakukan ini! Aku mau display: block-inline!! (yaitu berperilaku secara lahiriah sebagai blok tetapi ke dalam sebagai sebaris - kebalikan dari inline-block)
ADTC

Jawaban:

139

displayPengaturan CSS

Ini tentu saja mungkin - bukti konsep JSFiddle di mana Anda dapat melihat ketiga solusi yang mungkin:

  • display: inline-block- ini yang tidak kamu sadari

  • position: absolute

  • float: left/right

Robert Koritnik
sumber
2
Terima kasih! Saya tidak mempertimbangkan blok-inline!
Gabriele Cirulli
22

Anda bisa menggunakan display: inline-block.

Matt Ball
sumber
1
Saya telah memperbarui bukti konsep saya JSFiddle yang juga menunjukkan kemungkinan dengan position:absolute. Itu sebaik mungkin. Klik link di jawaban saya.
Robert Koritnik
14

Kamu dapat memakai:

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

EDIT: Tidak. Lihat http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

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

The_HTML_Man
sumber
Apakah ini jawaban troll? fit-content bukan nilai properti yang valid untuk lebar atau tinggi.
Adam
2
Ini berfungsi tetapi Anda harus menyetel nilainya ke -webkit-fit-contentatau -moz-fit-contentbergantung pada browser yang Anda gunakan.
warownia1
Baik. Saya tidak tahu itu.
The_HTML_Man
4

Anda juga bisa menggunakan

word-break: break-all;

ketika sepertinya tidak ada yang berhasil, ini selalu berfungsi;)

meghaM
sumber
1

ini berfungsi dengan baik di Edge dan Chrome:

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