2012-04-08 19 views
9

Ecco il mio piccolo problema (il valore sono solo qui per l'esempio):Estendere una larghezza div in base ai suoi figli larghezza

Diciamo che ho una finestra con una larghezza intorno 500px. Dentro il mio documento, ho un div esterno senza larghezza specificata, ma il seguente CSS:

.outer{ 
    white-space:nowrap; 
    background:blue; 
} 

All'interno di questo div sono altri 3 div che hanno le seguenti proprietà:

.t1{ 
    display:inline-block; 
    width:400px; 
} 

(notare la . larghezza 400px Ecco dove il problema è, la linea è più larga della finestra, e il div esterno non si estende il codice HTML sembra che:.

<div class="outer"> 
    <div class="t1">1</div> 
    <div class="t1">2</div> 
    <div class="t1">3</div> 
</div> 

Quello che sto cercando di ottenere è di avere il 3 div interno con uno sfondo blu, senza impostarlo per la classe t1. Ciò che questo esempio produrrà è uno sfondo blu limitato alla larghezza della finestra.

Vedere tutta l 'esempio qui: http://jsfiddle.net/sjCTR/ (dovrete per adattare l'angolo in basso a sinistra se lo schermo è di grandi dimensioni)

Mi chiedo se in qualche modo che si potrebbe ottenere attraverso il solo css/html, senza impostare la larghezza div esterna/lo sfondo div interno?

+0

Non sono sicuro di aver capito il tuo problema. Stai cercando di forzare la larghezza di ogni '.t1' per essere sempre 400px o sempre 33% o qualcos'altro? – Godwin

+0

No, il numero inserito qui è solo per l'esempio. Il problema è più complesso, ma l'idea è che la larghezza del div esterno non cresca per adattarsi alla larghezza dei suoi figli. –

risposta

22

Aggiungi float: left o display: inline-block a .outer.

+3

Grazie mille. Entrambi stanno funzionando. Potresti spiegare come è possibile quella magia (intendo perché aggiungerla all'esterno per farla espandere)? –

+1

Mi hai salvato da ore di mal di testa – Bruce

0

aggiungere straripamento: nascosto; width: 100%; All'esterno

Problemi correlati