4

Text problem

Saludos.

Tengo el siguiente problema, dentro de un panel tengo div con grillas de bootstrap, pero cuando se renderiza el texto teniendo un div mas que otro se descuadra dicha caja quedando de diferentes tamaños.

¿Cómo podría hacer para que dependiendo del texto mas grande se ajuste a la misma altura como se muestra en la imagen?

De antemano agradecido por la información que me puedan brindar.

1
  • 1
    Sería bueno que mostraras el código HTML que utilizas para poder ver dónde está el problema. Commented el 17 ago. 2016 a las 13:40

2 respuestas 2

1

La técnica más sencilla puede ser con flexbox, ideal para trabajar en layouts de una sola dimensión (no grillas enteras):

.container {
  border: solid 1px red;
  display: flex;
  margin: 10px;
}

.text {
  border: solid 1px blue;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}
<div class="container">
    <div class="text">
        Jelly pudding dessert toffee biscuit chocolate cake gingerbread. Sugar plum tootsie roll tootsie roll topping sesame snaps chocolate cake jujubes cake. Caramels gingerbread wafer pastry gummi bears. Chupa chups biscuit icing tootsie roll gingerbread sweet oat cake marzipan fruitcake. Pastry tootsie roll bear claw lemon drops ice cream marzipan lemon drops. Donut sugar plum jujubes macaroon cupcake marzipan caramels powder. Bonbon muffin gingerbread gingerbread jelly sugar plum jelly beans carrot cake danish. Sugar plum marshmallow oat cake cotton candy danish soufflé soufflé bear claw tiramisu. Carrot cake topping croissant. Pie ice cream gummies gummi bears powder.
    </div>
    <div class="text">
        Pastry powder pastry gingerbread pastry jelly chocolate cotton candy.
    </div>
</div>

Pequeña explicación de como funciona:

  • display: flex define un contenedor "flex".
  • flex-direction: column se aplica únicamente a contenedores flex y determina si los elementos contenidos serán tratados como columnas o filas (predeterminado).
  • flex: 1 se aplica únicamente a los "hijos" del contenedor, es una versión compacta de 3 elementos: flex-grow, flex-shrink y flex-basis. Los dos últimos parámetros son opcionales, el valor por defecto es 0 1 auto. En este caso flex-grow es 1, lo cual define que tanto puede crecer cada elemento, si todos tienen el mismo valor, todos ocupan el mismo espacio.
  • justify-content: center se aplica al contenedor y define como se justificará el contenido: al inicio, al final, al centro, espacio entre los elementos o espacio igual alrededor.
1
  • Excelente, me ha funcionado. Agradecido por tu información y explicación. Saludos.
    – U. Angel
    Commented el 17 ago. 2016 a las 14:42
1

Cólo con CSS, podrías usar flex. Si al contenedor le pones display:flex y a las columnas display:flex; flex:1, entonces se ajustarán y ocuparán todo el contenido del padre teniendo ambas columnas la misma altura y ancho.

Por ejemplo:

.contenedor {
  display:flex;
}
.contenedor .columna {
  border:1px solid blue;
  box-sizing:border-box;
  display:flex;
  flex:1;
}
<div class="contenedor">
  <div class="columna">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum tortor eu metus eleifend, vitae mollis elit dictum.
  </div>
  <div class="columna">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

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.