Espansione di un div genitore orizzontalmente per adattarlo ai figli fluttuati

Ho un div genitore con un numero variabile di div alfine di uguale dimensione flottanti a sinistra. Voglio che il genitore div si espanda alla larghezza dei bambini, non importa cosa, anche se ciò significa traboccare il proprio contenitore.Espansione di un div genitore orizzontalmente per adattarlo ai figli fluttuati

C'è un modo per farlo naturalmente con HTML/CSS?

Esempio (Il div estensibile sarebbe vento per essere 180px di larghezza):

HTML:

<div id="stretchable-div"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    ... 
</div

CSS:

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
}

fonte

2011-03-14 Yarin

hai finito per capire come farlo? –

Ok, sembra che il modo più semplice per farlo sarebbe utilizzare JavaScript per aumentare/diminuire in modo dinamico la larghezza dell'elemento contenitore, all'interno di un genitore con overflow. –

In questo esempio l'elemento elastico-div sarà busto fuori del suo genitore, e si estendono alla sua bambini.

Live Demo

css

#parent{ 
    width:200px; 
    height:180px; 
    background:red; 
} 

#stretchable-div{ 
    background:blue; 
    position: absolute; 
} 

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
}

Markup

<div id="parent">Im a parent 
    <div id="stretchable-div"> 
     <div class="child">a</div> 
     <div class="child">b</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
    </div> 
</div>

fonte

2011-03-14 19:04:47 Loktar

@ Loktar- Grazie, ma ho due domande- Guarda la mia versione modificata del tuo esempio: http://jsfiddle.net/seB5F/12/ 1) Quando aggiungo più elementi, o spingo il div assoluto verso destra, gli elementi iniziare a avvolgere contro il bordo del telaio. 2) Ho anche aggiunto l'overflow: nascosto al div genitore, ma continuo a vedere tutto il div estensibile. Perché non è possibile che il div estensibile si estenda in larghezza, con eventuali overflow nascosti? Puoi spiegare questo? – Yarin

Ok per rispondere alla prima domanda, perché la posizione è assoluta, lo toglie dal flusso di documenti, quindi ecco perché l'overflow non ha alcun effetto sul div estensibile, lo cambia in relativo e il suo nascosto – Loktar

@ Loktar- Hai risposto alla mia domanda, ma ho ancora un problema: voglio che l'overflow sia nascosto. Per farlo ho bisogno di rendere la posizione del contenitore: relativa, ma questo fa sì che il contenuto si avvolga. Qualche idea? – Yarin

è possibile aggiungere display: inline-block; per la elemento genitore. Per lavorare in ie7 devi usare anche display:inline;zoom:100%;.

Quindi un possibile css per quello che vi serve è questo:

#stretchable-div { 
    background: none repeat scroll 0 0 red; 
    display: inline-block; 
    overflow: auto; /* clear the floats */ 
    *display:inline; /* ie7 hack even better use conditional comment */ 
    zoom:100%; 
}

esempio:http://jsfiddle.net/8JJSf/

fonte

2011-03-14 18:57:57 Sotiris

@ Sotiris- Grazie, ma il tuo esempio non permetterà al genitore div di traboccare il suo contenitore. Vedi http://jsfiddle.net/8JJSf/4/. – Yarin

@Yarin corretto, per overflow del contenitore è necessario anche 'position: absolute' per' # stretchable-div' – Sotiris

@ Sotiris- Sì, funziona, ma non è necessario visualizzare: block-inline, giusto? – Yarin

Proprio come @ l'esempio di Pizzicato, ma usando overflow:hidden per cancellare il genitore div: http://jsfiddle.net/dSjv4/.

C'è un ottimo articolo sul posizionamento e la cancellazione di div in A List Apart here (vicino alla fine dell'articolo).

fonte

2011-03-14 19:13:55

@ Nathan- Grazie, ma il tuo esempio non permetterà al genitore div di traboccare il suo contenitore. Vedi http://jsfiddle.net/dSjv4/14/ – Yarin

Espansione di un div genitore orizzontalmente per adattarlo ai figli fluttuati

risposta

Problemi correlati