Due div sovrapposti con altezza variabile = senza altezza sul contenitore

Question

È abbastanza facile fare due div sovrapposizioni quando la dimensione del div contenitore è nota ma cosa succede se l'altezza div non può?

ho cercato di farlo senza manipolare Altezza contenitore: http://jsfiddle.net/AJfAV/ Ma #text2 andare oltre #text3 e non "spingere" esso. Come si può ridimensionare automaticamente il #container?

riesco a raggiungere il mio obiettivo utilizzando jQuery UI, ma sento che questo non è una soluzione elegante: http://jsfiddle.net/AJfAV/6/

Answer 1

E 'questo quello che ti serve?

Updated fiddle:

che sto impostando height al default, auto, utilizzando jQuery, come questo:

$("#container").css("height", "auto"); 

È anche possibile impostare: height: auto; in CSS.

Answer 2

Hai bisogno di posizione: assoluta? È possibile utilizzare il posizionamento assoluto se non si desidera eseguire alcuna disposizione, ma un posizionamento. Il posizionamento assoluto prende un elemento completamente fuori dal flusso di elementi. Non sanno nulla del suo esistente.

È possibile utilizzare i galleggianti e una tecnica per racchiudere i galleggianti. Sto usando chiaro:

.cl-left { 
    clear: left; 
    height: .1px; 
    font-size: 0; 
    line-height: 0; 
} 

Non dimenticare di aggiungere <div class="cl-left">&nbsp;</div>.

Inoltre, viene utilizzato un margine negativo. Pertanto, # text2 è inchiodato a destra.

http://jsfiddle.net/AJfAV/7/

Answer 3

questo può essere risolto se ha rimosso posizionamento assoluto di #text1 e #text2.

e fare #text2 sovrapposizione #text1 facendo sia float:left e impostare margin-left:-30px per #text2.

ora diamo prova che: http://jsfiddle.net/RPe4H/

Il problema ora è che quando #text1 è attivata, #text2 galleggerà per alto a sinistra #container, che ciò accada perché JQuery impostato display:none sull'elemento quando non girevoli è fatto.

ora di risolvere questo, mettere # testo1 e testo2 # all'interno di contenitori con la stessa larghezza, in modo da #text non influisce il flusso quando è impostato su display:none, anche è necessario impostare min-height:1px sul contenitore di #text1.

ora funziona come previsto http://jsfiddle.net/MyyF6/1/