Bagaimana saya bisa membuat div tidak lebih besar dari isinya?

Saya memiliki tata letak yang mirip dengan:

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

Saya ingin divhanya memperluas ke selebar saya tablemenjadi.

Solusinya adalah mengatur divuntuk Anda display: inline-block.

Anda menginginkan elemen blok yang memiliki apa yang disebut CSS shrink-to-fit width dan spec tidak memberikan cara yang diberkati untuk mendapatkan hal seperti itu. Dalam CSS2, shrink-to-fit bukanlah tujuan, tetapi berarti menghadapi 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 bagus. Itu mahal. Shrink-to-fit berarti memformat setidaknya dua kali: Anda tidak dapat mulai memformat elemen hingga Anda tahu lebarnya, dan Anda tidak dapat menghitung lebar tanpa melalui seluruh konten. Plus, seseorang tidak perlu elemen shrink-to-fit sesering mungkin berpikir. Mengapa Anda perlu div tambahan di sekitar meja Anda? Mungkin hanya keterangan meja yang Anda butuhkan.

Saya pikir menggunakan

display: inline-block;

akan berfungsi, namun saya tidak yakin tentang kompatibilitas browser.

Solusi lain adalah dengan membungkus Anda divdengan yang lain div(jika Anda ingin mempertahankan perilaku blokir):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

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

Saya akan merekomendasikan ini:

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

Bonus: Anda sekarang juga dapat dengan mudah memusatkan yang baru #elementdengan hanya menambahkan margin: 0 auto.

Anda dapat mencoba fit-content(CSS3):

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

• Dukungan browser
• Spesifikasi

Apa yang berhasil untuk saya adalah:

display: table;

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

Ada dua solusi yang lebih baik

1. display: inline-block;

   ATAU

2. display: table;

Dari keduanya display:table;lebih baik, karenadisplay: inline-block; menambah margin ekstra.

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

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

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

Tidak tahu dalam konteks apa ini akan muncul, tapi saya percaya properti CSS-style floatbaik leftatauright akan memiliki efek ini. Di sisi lain, itu akan memiliki efek samping lain juga, seperti membiarkan teks mengambang di sekitarnya.

Harap perbaiki saya jika saya salah, saya tidak yakin 100%, dan saat ini tidak dapat mengujinya sendiri.

Jawaban untuk pertanyaan Anda ada di masa depan, teman saya ...

yaitu "intrinsik" akan hadir dengan pembaruan CSS3 terbaru

width: intrinsic;

sayangnya IE ada di belakangnya sehingga belum mendukungnya

Lebih lanjut tentang hal ini: CSS Intrinsik & Modul Ukuran Ekstinsik Level 3 dan Dapatkah Saya Menggunakan? : Ukuran Intrinsik & Ekstrinsik .

Untuk saat ini Anda harus puas <span>atau <div>diatur

display: inline-block;

Solusi yang kompatibel dengan CSS2 adalah dengan menggunakan:

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

Anda juga bisa mengapung div Anda yang akan memaksanya sekecil mungkin, tetapi Anda harus menggunakan perbaikan yang jelas jika ada sesuatu di dalam div Anda mengambang:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

berfungsi dengan baik untuk saya :)

OK, dalam banyak kasus Anda bahkan tidak perlu melakukan apa-apa karena div default telah heightdan widthsebagai otomatis, tetapi jika itu bukan kasus Anda, menerapkan inline-blocktampilan akan bekerja untuk Anda ... lihat kode yang saya buat untuk Anda dan itu lakukan apa yang kamu 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>

Ini telah disebutkan dalam komentar dan sulit ditemukan di salah satu jawaban sehingga:

Jika Anda menggunakan display: flexuntuk alasan apa pun, 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.

Anda dapat menggunakan inline-blocksebagai @ user473598, tetapi waspadalah terhadap browser yang lebih 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 sama sekali tidak mendukung inline-block, tetapi mereka punya -moz-inline-stack yang hampir sama

Beberapa peramban silang di sekitar inline-blockatribut tampilan: 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/

Cukup masukkan gaya ke file CSS Anda

div { 
    width: fit-content; 
}

<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 kadang-kadang tidak suka tabel, tetapi saya harus memberitahu Anda, saya mencoba hack inline css, dan mereka agak bekerja di beberapa divs tetapi di yang lain tidak, jadi, itu benar-benar hanya lebih mudah untuk menyertakan div yang sedang berkembang di sebuah tabel ... dan ... dapat memiliki atau tidak properti inline dan masih merupakan tabel yang akan menahan total lebar konten. =)

Demo yang berfungsi ada 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>

Solusi flexbox CSS3 saya dalam dua rasa: Yang di atas berperilaku seperti rentang dan yang di bawah berperilaku seperti div, mengambil semua lebar dengan bantuan pembungkus. Kelas mereka masing-masing adalah "top", "bottom" dan "bottomwrapper".

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.

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Ini akan membuat lebar div induk sama dengan lebar elemen terbesar.

Coba display: inline-block;. Untuk itu agar kompatibel dengan browser silang, gunakan kode css di bawah ini.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

Mengganggu Firebug, saya menemukan nilai properti -moz-fit-contentyang persis melakukan apa yang diinginkan OP dan dapat digunakan sebagai berikut:

width: -moz-fit-content;

Meskipun hanya berfungsi di Firefox, saya tidak dapat menemukan padanan untuk browser lain seperti Chrome.

Anda dapat mencoba kode ini. Ikuti kode di bagian CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

Saya telah memecahkan masalah yang sama (di mana saya tidak ingin menggunakan display: inline-blockkarena item itu terpusat) dengan menambahkan spantag di dalam divtag, dan memindahkan pemformatan CSS dari divtag luar ke spantag batin baru . Hanya membuang ini di luar sana sebagai ide alternatif lain jika display: inline blockbukan jawaban yang cocok untuk Anda.

Kita dapat menggunakan salah satu dari dua cara pada divelemen:

display: table;

atau,

display: inline-block; 

Saya lebih suka menggunakan display: table;, karena menangani, semua ruang ekstra sendiri. Sementara display: inline-blockmembutuhkan beberapa perbaikan ruang tambahan.

div{
  width:auto;
  height:auto;
}

Jika Anda memiliki kontainer yang melanggar batas, setelah berjam-jam mencari solusi CSS yang baik dan tidak menemukannya, saya sekarang menggunakan jQuery sebagai gantinya:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

Revisi (berfungsi jika Anda memiliki banyak anak): Anda dapat menggunakan jQuery (Lihat tautan JSFiddle)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Jangan lupa untuk menyertakan jQuery ...

Lihat JSfiddle di sini

Saya mencoba div.classname{display:table-cell;}dan berhasil!