Come impilare automaticamente i div verticalmente all'interno di un genitore?

Question

Qui è quello che sto cercando di realizzare ...

1. "genitore" ha position: relative
2. "div 1-3" hanno position: absolute

Tuttavia, ogni volta che fai questo, mi trovo a dover assegnare specifici valori "top" nel mio CSS. Quindi div 1 potrebbe essere in cima: 50px, div 2 sarebbe in alto: 150px, e div 3 sarebbe in alto: 225px;

C'è un modo per assicurarsi che i div continuino a raggrupparsi all'interno del genitore senza assegnare valori massimi e/o posizionamento assoluto?

Answer 1

A div dovrebbe già essere visualizzato come blocco e occupare una "riga" completa. Ecco alcuni HTML e CSS per fare un esempio, confrontarlo con il codice:

http://jsfiddle.net/mWcWV/

<div id="parent"> 

    <div class="child">Foo</div> 
    <div class="child">Bar</div> 
    <div class="child">Baz</div> 

</div> 

Answer 2

Gli elementi div sono elementi di blocco, il che significa che eseguiranno una riga intera e che qualsiasi elemento accanto a essi salterà una riga. Basta fare:

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

Se questo non dovesse funzionare, probabilmente avete bisogno di metterli in display: inline-block;

Answer 3

Basta rimuovere il posizionamento assoluto. Centra i div usando margin:auto e poi fornisci i margini verticali che ti piacciono.

Answer 4

si può dare margine a div interno.

Answer 5

deve essere dritta:

HTML:

<div class="container"> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="green"></div> 
</div> 

CSS:

.container { 
    position: relative; 
    width: 500px; 
    height: 500px; 
    background-color: #ffbf00; 
} 
.red { 
    background-color: #f00; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 
.blue { 
    background-color: #0f0; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 
.green { 
    background-color: #00f; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 

Controllare questo fiddle.

Answer 6

Durante l'uso di file css ...

div 
{ 
    display : block; 
} 

che darà una linea di rottura per ogni div blocco e che la funzione è di default e non usano relative - absolute tecnica.