2010-09-20 18 views
25

Sto cercando di creare un'intestazione h2 per i widget della barra laterale, ma voglio che la larghezza della classe div sia uguale alla larghezza del contenuto. Sembra che non sia possibile impostare una larghezza perché quei titoli con contenuti più lunghi, quindi contenuti più brevi, si rompono.Div Dimensione Dimensione del contenuto automatica

Come posso semplicemente aumentare o diminuire la larghezza in base alla lunghezza del contenuto? Qualsiasi aiuto sarebbe molto apprezzato.

risposta

56

Per quanto ne so, display: inline-block è quello che probabilmente è necessario. Questo renderà come se fosse una sorta di linea, ma permetti comunque di usare cose come i margini e così via.

+1

ma rende il mio div 100% in larghezza che è quello che non mi serve – HollerTrain

+0

@HollerTrain: Che browser stai usando? Perché funziona perfettamente qui. Se rimuovo 'width' e' text-align', e aggiungo 'display: inline-block' su' h2.widgettitle', ottengo il risultato desiderato. – Svish

+1

A proposito, se fossi in te, gestirò il sito attraverso http://validator.w3.org e proverei a ridurlo un po '. Non ho una cattiva connessione internet e non un computer lento, ma la tua pagina impiega circa 1,5 minuti per caricarsi. Ad esempio, alcune immagini sono molto più grandi di quanto debbano essere; circa 200kB ciascuno. Installa http://getfirebug.com se non lo hai fatto, apri la sua scheda Rete e ricarica la tua pagina (Ctrl + F5, probabilmente) – Svish

1

h2 { display: inline }

+0

Non dimenticare di impostare l'altezza della linea per assicurarti che anche le h2 abbiano la stessa altezza, questo sembra fallire quando lo provo sul tuo esempio live. –

1

Il modo migliore per farlo è quello di impostare display: inline;. Nota, tuttavia, che nella visualizzazione in linea, perdi l'accesso ad alcune proprietà del layout, come l'altezza manuale e i margini verticali, ma questo non sembra essere un problema per la tua pagina.

+0

sì quando ho impostato su 'display: inline' non posso impostare un margine inferiore che è disperatamente necessario. pensieri? – HollerTrain

3

Se display: inline; non funziona, provare display: inline-block;. :)

+0

utilizza 'display: inline' mi limita ad usare i comandi' margin-bottom'? ora che sto usando 'display: inline' non posso aggiungere margine inferiore ad esso! pensieri? – HollerTrain

+0

L'uso di solo in linea, è per questo che ho suggerito di usare il blocco inline, questo rimuove quel limite .. afaik. – Kyle

+1

'blocco inline' lo rende esteso al 100% che è quello che non voglio – HollerTrain

-7

Il modo corretto per farlo è utilizzare un tag.

sono blocchi ... sono in linea. Questo è ciò per cui sono progettati.

Inoltre, reagire ai tag. Non è possibile azione (mettere un) a un div, ma è possibile azione un ...

Spero che aiuti.

+0

no non aiuta –

Problemi correlati