Cara membuat div tidak lebih besar dari isinya?

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

Anda ingin memblokir elemen yang memiliki apa yang CSS panggilan shrink-to-fit lebar dan spec tidak memberikan diberkati cara untuk mendapatkan hal seperti itu. Dalam CSS2, shrink-to-fit adalah bukan tujuan, tapi sarana untuk berurusan dengan situasi di mana browser "untuk" mendapatkan lebar dari udara tipis. Situasi tersebut adalah:

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

ketika tidak ada lebar yang ditentukan. Aku mendengar mereka berpikir untuk menambahkan apa yang anda inginkan di CSS3. Untuk sekarang, membuat hubungannya dengan salah satu di atas.

Keputusan untuk tidak mengekspos fitur ini diatas mungkin tampak aneh, tapi ada alasan yang baik. Itu adalah mahal. Kecilkan-to-fit berarti format setidaknya dua kali: anda tidak dapat memulai memformat elemen sampai anda tahu lebarnya, dan anda tidak bisa menghitung lebar w/o akan melalui seluruh konten. Plus, salah satu tidak perlu shrink-to-fit elemen sebagai sering sebagai salah satu mungkin berpikir. Mengapa anda perlu ekstra div sekitar meja anda? Mungkin judul tabel adalah semua yang anda butuhkan.

Saya pikir menggunakan

display: inline-block;

akan bekerja, namun saya'm tidak yakin tentang kompatibilitas browser.

Solusi lain akan membungkus div lain div (jika anda ingin mempertahankan blok behavior):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block menambahkan tambahan margin untuk elemen anda.

Saya akan merekomendasikan ini:

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

Bonus: sekarang Anda juga dapat dengan mudah center yang baru mewah #elemen hanya dengan menambahkan margin: 0 auto.

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

Foo Hack – Cross Browser Support untuk inline-block Styling (2007-11-19).

Apa yang bekerja untuk saya adalah:

display: table;

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

Anda dapat mencoba fit-isi (CSS3):

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

• Dukungan Browser
• Spesifikasi

Ada dua solusi yang lebih baik

1. display: inline-block;

ATAU

2. display: tabel;

Dari dua display:tabel; lebih baik, karena display: inline-block; menambahkan tambahan margin.

Untuk display:inline-block; anda dapat menggunakan negatif margin metode untuk memperbaiki ruang ekstra

Jawaban untuk pertanyaan anda meletakkan di depan teman saya ...

yaitu "intrinsik" datang dengan CSS3 terbaru update

width: intrinsic;

sayangnya IE belakang dengan itu, sehingga tidak't dukungan itu belum

Lebih lanjut tentang hal ini: CSS Intrinsik & Ekstrinsik Ukuran Module Level 3 dan Dapat saya Gunakan?: Intrinsik & Ekstrinsik Ukuran.

Untuk sekarang anda harus puas dengan <span> atau <div> set untuk

display: inline-block;

Tidak tahu dalam konteks apa ini akan muncul, tapi saya percaya CSS-style property float baik kiri atau kanan akan memiliki efek ini. Di sisi lain, it'll memiliki efek samping lain juga, seperti memungkinkan teks untuk mengapung di sekitar itu.

Tolong koreksi saya jika saya'm salah meskipun, saya'm tidak yakin 100%, dan saat ini dapat't test itu sendiri.

width:1px;
white-space: nowrap;

bekerja dengan baik bagi saya :)

Sebuah CSS2 kompatibel solusi adalah dengan menggunakan:

.my-div
{
    min-width: 100px;
}

Anda juga bisa mengapung anda di div yang akan memaksa sekecil mungkin, tetapi anda'll perlu menggunakan clearfix jika ada sesuatu yang di dalam div mengambang:

.my-div
{
    float: left;
}

OK, dalam banyak kasus, anda bahkan don't perlu melakukan apa-apa sebagai default div telah tinggi dan lebar auto, tapi jika itu's tidak kasus anda, menerapkan inline-block display akan bekerja untuk anda... lihat kode yang saya buat untuk anda dan itu's melakukan apa yang anda cari:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

Hal ini telah disebutkan dalam komentar dan sulit untuk menemukan di salah satu jawaban agar:

Jika anda menggunakan display: flex untuk alasan apapun, anda dapat menggunakan:

div {
    display: inline-flex;
}

Ini juga didukung secara luas di seluruh browser.

Anda dapat melakukannya hanya dengan menggunakan display: inline; (atau white-space: nowrap;).

Saya harap anda menemukan ini berguna.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Saya tahu orang-orang yang don't seperti tabel kadang-kadang, tapi aku harus memberitahu anda, aku mencoba inline css hacks, dan mereka agak bekerja di beberapa divs tetapi di lain didn't, jadi, itu benar-benar hanya lebih mudah untuk melampirkan memperluas div di meja...dan...dapat memiliki atau tidak inline properti dan masih table adalah salah satu yang's akan bertahan total lebar dari konten. =)

Anda dapat menggunakan inline-block sebagai @user473598, tapi waspadalah terhadap browser lama..

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla tidak mendukung inline-block sama sekali, tapi mereka memiliki -moz-inline-stack yang hampir sama

Beberapa cross-browser sekitar inline-block menampilkan atribut: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Anda dapat melihat beberapa tes dengan atribut ini di: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Hanya menempatkan sebuah gaya ke file CSS

div { 
    width: fit-content; 
}

Kerja demo di sini-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Saya CSS3 flexbox solusi dalam dua rasa: Yang satu di atas yang berperilaku seperti span dan satu di bagian bawah berperilaku seperti div, mengambil semua yang lebar dengan bantuan dari bungkusnya. Mereka kelas "top", "bottom" dan "bottomwrapper" masing-masing.

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this
<div class="top">
    <table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
        <table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.