css - vertically - ¿Cómo apilo automáticamente los divs verticalmente dentro de un padre?

centrar texto horizontalmente css

Question

Esto es lo que estoy tratando de lograr ...

1. "padre" tiene posición: relativo
2. "div 1-3" tiene posición: absoluta

Sin embargo, cada vez que hago esto, tengo que asignar valores "principales" específicos en mi CSS. Así que div 1 podría ser superior: 50px, div 2 sería superior: 150px, y div 3 sería superior: 225px;

¿Hay una manera de asegurarse de que los divs continúen apilando dentro del padre sin asignar valores superiores y / o posicionamiento absoluto?

Answer 1

Debería ser recto:

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;
}

Revisa este fiddle .

Answer 2

En el uso de archivos css ...

div
{
    display : block;
}

Lo que dará una línea de ruptura para cada bloque div y esa característica es por defecto y no usa absolute técnica relative .

Answer 3

Los elementos div son elementos de bloque, lo que significa que tomarán una fila completa y que cualquier elemento a su lado saltará una línea. Solo haz:

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

Si eso no funciona, probablemente deba ponerlos en pantalla: inline-block;

Answer 4

Puedes dar margen a div interior.

Answer 5

Solo quita el posicionamiento absoluto. Centre los divs usando margin:auto y luego proporcione los márgenes verticales que desee.

Answer 6

Un div ya debería mostrarse como un bloque y ocupar una "fila" completa. Aquí hay algunos HTML y CSS para dar un ejemplo, compararlo con su código:

http://jsfiddle.net/mWcWV/

<div id="parent">

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

</div>