Come posso fare un div non più grande del suo contenuto?

Ho un layout simile a:

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

Vorrei che il divsolo si espandesse fino a tablediventare il mio .

La soluzione è quella di impostare il diva display: inline-block.

Volete un elemento a blocchi che abbia ciò che CSS chiama larghezza ridotta per adattarsi e le specifiche non forniscono un modo benedetto per ottenere una cosa del genere. In CSS2, il ridimensionamento non è un obiettivo, ma significa affrontare una situazione in cui il browser "deve" ottenere una larghezza dal nulla. Tali situazioni sono:

• galleggiante
• elemento assolutamente posizionato
• elemento inline-block
• elemento da tavolo

quando non è stata specificata alcuna larghezza. Ho sentito che pensano di aggiungere quello che vuoi in CSS3. Per ora, accontentati di uno dei precedenti.

La decisione di non esporre direttamente la funzionalità può sembrare strana, ma c'è una buona ragione. È costoso. Rimpicciolire significa formattare almeno due volte: non è possibile iniziare a formattare un elemento finché non si conosce la sua larghezza e non è possibile calcolare la larghezza senza passare attraverso l'intero contenuto. Inoltre, non è necessario un elemento termoretraibile ogni volta che si potrebbe pensare. Perché hai bisogno di div extra attorno al tuo tavolo? Forse la didascalia della tabella è tutto ciò che serve.

Penso che usando

display: inline-block;

funzionerebbe, tuttavia non sono sicuro della compatibilità del browser.

Un'altra soluzione sarebbe quella di avvolgere il tuo divin un altro div(se vuoi mantenere il comportamento del blocco):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block aggiunge un margine extra al tuo elemento.

Consiglierei questo:

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

Bonus: ora puoi anche facilmente centrare quella nuova fantasia #elementsemplicemente aggiungendo margin: 0 auto.

Puoi provare fit-content(CSS3):

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

• Supporto per il browser
• specificazione

Ciò che funziona per me è:

display: table;

nel div. (Testato su Firefox e Google Chrome ).

Esistono due soluzioni migliori

1. display: inline-block;

   O

2. display: table;

Di questi due display:table;è meglio, perché display: inline-block;aggiunge un margine in più.

Perché display:inline-block;puoi usare il metodo del margine negativo per riparare lo spazio extra

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

Foo Hack - Supporto Cross Browser per lo styling inline block (19-11-2007) .

Non sapendo in quale contesto apparirà, ma credo che la proprietà in stile CSS floatsia lefto rightavrà questo effetto. D'altra parte, avrà anche altri effetti collaterali, come consentire al testo di fluttuare attorno ad esso.

Per favore, correggimi se sbaglio, non sono sicuro al 100% e al momento non posso provarlo da solo.

La risposta alla tua domanda risiede in futuro, amico mio ...

vale a dire "intrinseco" sta arrivando con l'ultimo aggiornamento CSS3

width: intrinsic;

sfortunatamente IE è dietro con esso, quindi non lo supporta ancora

Ulteriori informazioni: Modulo di dimensionamento intrinseco ed estrinseco CSS livello 3 e posso usare? : Dimensionamento intrinseco ed estrinseco .

Per ora devi essere soddisfatto <span>o <div>impostato su

display: inline-block;

Una soluzione compatibile CSS2 è utilizzare:

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

Puoi anche far galleggiare il tuo div che lo forzerà il più piccolo possibile, ma dovrai usare un clearfix se qualcosa all'interno del tuo div sta fluttuando:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

funziona bene per me :)

OK, in molti casi non devi nemmeno fare nulla come per impostazione predefinita div ha heighte widthcome auto, ma se non è il tuo caso, applicare inline-blockdisplay funzionerà per te ... guarda il codice che creo per te e lo fa quello che cerchi:

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>

Questo è stato menzionato nei commenti ed è difficile da trovare in una delle risposte, quindi:

Se si utilizza display: flexper qualsiasi motivo, è possibile invece utilizzare:

div {
    display: inline-flex;
}

Questo è anche ampiamente supportato da tutti i browser.

Puoi farlo semplicemente usando display: inline;(o white-space: nowrap;).

Spero che lo trovi utile

Puoi usare inline-block@ user473598, ma fai attenzione ai browser più vecchi.

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

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

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

Mozilla non supporta affatto il blocco inline, ma hanno quello -moz-inline-stackche è più o meno lo stesso

Alcuni inline-blockattributi del browser intorno al display: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Puoi vedere alcuni test con questo attributo in: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Inserisci uno stile nel tuo file CSS

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>

So che alle persone non piacciono i tavoli a volte, ma devo dirtelo, ho provato gli hack in linea CSS, e in un certo senso hanno funzionato in alcuni div ma in altri no, quindi, era davvero più semplice racchiudere il div in espansione una tabella ... e ... può avere o meno la proprietà inline e comunque la tabella è quella che conterrà la larghezza totale del contenuto. =)

Una demo funzionante è qui-

.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>

La mia soluzione flexbox CSS3 in due versioni: quella in alto si comporta come una campata e quella in basso si comporta come un div, prendendo tutta la larghezza con l'aiuto di un wrapper. Le loro classi sono rispettivamente "top", "bottom" e "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>

Questo renderà la larghezza div principale uguale alla larghezza dell'elemento più grande.

Prova display: inline-block;. Per essere compatibile con più browser, utilizzare il codice css riportato di seguito.

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>

Manomettendo con Firebug ho trovato il valore della proprietà -moz-fit-contentche fa esattamente ciò che l'OP voleva e poteva essere usato come segue:

width: -moz-fit-content;

Sebbene funzioni solo su Firefox, non sono riuscito a trovare alcun equivalente per altri browser come Chrome.

Puoi provare questo codice. Segui il codice nella sezione 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>

Ho risolto un problema simile (dove non volevo usare display: inline-blockperché l'elemento era centrato) aggiungendo un spantag all'interno del divtag e spostando la formattazione CSS dal divtag esterno al nuovo spantag interno . Basta lanciarlo qui come un'altra idea alternativa se display: inline blocknon è una risposta adatta a te.

Possiamo usare uno dei due modi sul div sull'elemento:

display: table;

o,

display: inline-block; 

Preferisco usare display: table;, perché gestisce, tutti gli spazi extra da solo. Mentre ha display: inline-blockbisogno di un po 'di spazio aggiuntivo di fissaggio.

div{
  width:auto;
  height:auto;
}

Se hai contenitori che spezzano le linee, dopo ore alla ricerca di una buona soluzione CSS e non trovandone nessuna, ora uso jQuery:

$('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>

Revisionato (funziona se hai più figli): puoi usare jQuery (guarda il link JSFiddle)

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


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

Non dimenticare di includere jQuery ...

Vedi il JSfiddle qui

Ho provato div.classname{display:table-cell;}e ha funzionato!