1

Quiero que cuando un div aumente su altura, el espacio que está definido entre ellos no se pierda.

el div de la mitad cuenta con 3 descripciones, el resto solo una, sucede que cuando el div de la mitad tiene las 3, los demás se apartan demasiado 'aumentan su espacio' y no quiero eso, quiero que conserven su espacio.

Ya sé que puedo lograr el efecto uniendo dos div dentro de una caja y poniendo los contenido en fila, pero ya tengo todo armado y no puedo por tiempo y además solo se podría con 1 div en cada fila y necesito los 3 en cada fila.

Lo que quiero lograr y está usando la app de facebook en estos momentos:

introducir la descripción de la imagen aquí

body{
background-color: #ddd;
}
.caja{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
background-color: #ff4000;
}
.contenido{
width: 30%;
height: auto;
margin-bottom: 10px;
text-align: center;
background-color: #f5f5f5;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>

<div class="caja">

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
<p>2 descripciones</p>
<p>3 descripciones</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>


<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>

</div>

</body>
</html>

1

1 respuesta 1

0

Dijiste que querias algo rapido asi que puede que esta no sea la mejor forma, pero podrias probar poniendole espacios en blanco a los p con &nbsp;, o poniendole una altura minima a cada div, al ser todos de la misma altura, no se van a desordenar. De nuevo, puede no ser la mejor solucion, pero una rapida...

body{
background-color: #ddd;
}
.caja{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
background-color: #ff4000;
}
.contenido{
width: 30%;
height: auto;
margin-bottom: 10px;
text-align: center;
background-color: #f5f5f5;
}

.alto-minimo{
 min-height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>

<div class="caja">

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
<p>2 descripciones</p>
<p>3 descripciones</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div class="contenido alto-minimo">
<h2>hola</h2>
<p>descripcion</p>
</div>

<div class="contenido alto-minimo">
<h2>hola</h2>
<p>descripcion</p>
</div>


<div class="contenido alto-minimo">
<h2>hola</h2>
<p>descripcion</p>
</div>

</div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.