Domanda Come rendere div non più grande del suo contenuto?


Ho un layout simile a:

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

Vorrei per il div per espandere solo al mio come il mio table diventa.


1685
2018-01-16 16:03


origine


risposte:


La soluzione è impostare il tuo div a display: inline-block.


2032
2017-10-12 16:47



Volete un elemento di blocco che abbia ciò che i CSS chiamano ridimensionamento della larghezza e la specifica non fornisce un modo benedetto per ottenere una cosa del genere. Nei CSS2, il rimpicciolimento non è un obiettivo, ma significa affrontare una situazione in cui il browser "deve" ottenere una larghezza dal nulla. Quelle situazioni sono:

  • galleggiante
  • elemento assolutamente posizionato
  • elemento di blocco in linea
  • elemento di tabella

quando non è specificata la 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 funzione può sembrare strana, ma c'è una buona ragione. È costoso. Shrink-to-fit significa formattazione almeno due volte: non è possibile iniziare la formattazione di un elemento finché non si conosce la sua larghezza e non è possibile calcolare la larghezza senza l'intero contenuto. Inoltre, uno non ha bisogno di elementi restringibili per adattarsi tutte le volte che si può pensare. Perché hai bisogno di div extra intorno al tuo tavolo? Forse la didascalia della tabella è tutto ciò di cui hai bisogno.


307
2018-01-16 16:40



Penso che usando

display: inline-block;

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


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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



display: inline-block aggiunge un margine in più al tuo elemento.

Vorrei raccomandare questo:

#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 - Supporto cross browser per lo stile inline-block (2007-11-19).


82
2017-08-25 19:36



Ciò che funziona per me è:

display: table;

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


74
2018-01-11 12:01



Puoi provare fit-content (CSS3):

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

60
2018-05-27 00:41



Ci sono due soluzioni migliori

  1. display: inline-block;

    O

  2. display: table;

Di questi due display:table; è meglio. 

Per display:inline-block; puoi usare il metodo del margine negativo per correggere lo spazio extra


53
2018-05-10 20:16



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

cioè "intrinseco" sta arrivando con l'ultimo aggiornamento CSS3

width: intrinsic;

purtroppo IE è dietro con esso quindi non lo supporta ancora

Maggiori informazioni su questo: Modulo di dimensionamento intrinseco CSS ed estrinseco livello 3 e Posso usare?: Dimensionamento intrinseco ed estrinseco.

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

display: inline-block;

41
2017-12-11 13:07