css - vertically - ¿Cómo apilo automáticamente los divs verticalmente dentro de un padre?
centrar texto horizontalmente css (6)
Esto es lo que estoy tratando de lograr ...
- "padre" tiene posición: relativo
- "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?
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 .
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 .
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;
Puedes dar margen a div interior.
Solo quita el posicionamiento absoluto. Centre los divs usando margin:auto y luego proporcione los márgenes verticales que desee.
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:
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>