Pertanyaan Bagaimana cara membuat div tidak lebih besar dari isinya?


Saya memiliki tata letak yang mirip dengan:

<div>
    <table>
    </table>
</div>

Saya ingin untuk itu div untuk hanya memperluas ke selebar saya table menjadi.


1687
2018-01-16 16:03


asal


Jawaban:


Solusinya adalah mengatur Anda div untuk display: inline-block.


2033
2017-10-12 16:47



Anda ingin elemen blok yang memiliki apa yang CSS sebut dengan lebar shrink-to-fit dan spesifikasi tidak menyediakan cara yang diberkati untuk mendapatkan hal semacam itu. Dalam CSS2, shrink-to-fit bukanlah tujuan, tetapi berarti untuk menangani situasi di mana browser "harus" mendapatkan lebar dari udara tipis. Situasi tersebut adalah:

  • mengapung
  • elemen benar-benar diposisikan
  • elemen inline-block
  • elemen tabel

ketika tidak ada lebar yang ditentukan. Saya mendengar mereka berpikir untuk menambahkan apa yang Anda inginkan di CSS3. Untuk saat ini, lakukan dengan salah satu di atas.

Keputusan untuk tidak mengekspos fitur secara langsung mungkin tampak aneh, tetapi ada alasan yang bagus. Itu mahal. Shrink-to-fit berarti memformat setidaknya dua kali: Anda tidak dapat memulai memformat elemen sampai Anda tahu lebarnya, dan Anda tidak dapat menghitung lebar tanpa melalui seluruh konten. Plus, seseorang tidak perlu elemen menyusut-ke-cocok sesering yang orang mungkin berpikir. Mengapa Anda perlu div ekstra di sekitar meja Anda? Mungkin keterangan meja adalah semua yang Anda butuhkan.


307
2018-01-16 16:40



Saya pikir menggunakan

display: inline-block;

akan berfungsi, namun saya tidak yakin tentang kompatibilitas browser.


Solusi lain adalah membungkus Anda div di tempat lain div (jika Anda ingin mempertahankan perilaku blokir):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



display: inline-block menambahkan margin ekstra ke elemen Anda.

Saya akan merekomendasikan ini:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

180
2018-05-12 23:39



display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Dukungan Lintas Browser untuk Styling inline-block (2007-11-19).


82
2017-08-25 19:36



Apa yang berhasil bagi saya adalah:

display: table;

dalam div. (Diuji pada Firefox dan Google Chrome).


74
2018-01-11 12:01



Anda dapat mencoba fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

60
2018-05-27 00:41