Haga columnas de altura igual y título alineado verticalmente en Bootstrap 2.0

Ampliando esta pregunta sobre cómo hacer columnas de igual altura en Twitter Bootstrap ( violín original ).
Ahora las alturas de columna coinciden, pero necesito hacer que los subtítulos se alineen verticalmente en la parte inferior.

Aquí hay un nuevo violín .

Como puede ver, los subtítulos H2 no se alinean.
Así es como quiero que se vea:

manifestación

Comenzar una nueva con:

no funciona porque los subtítulos se separan del texto en roturas de medios.

El problema

El problema es que la respuesta de la pregunta original prácticamente establece la altura de cada div en infinito. Después del contenido, el div solo se alarga y sigue.

La desventaja de esto es que no sabemos dónde está el fondo de este elemento.

El relleno está dimensionado para el contenido: pero el elemento se estira para siempre

dimensionamiento


Una solución

Un elemento que sí sabe dónde termina el elemento es el envoltorio. Ese era su trabajo. Entonces, lo que nos gustaría hacer es posicionar nuestra etiqueta de encabezado relativa al contenedor .col-wrap .

Para colocar un elemento relativo a su abuelo, estableceremos la position nieto en absolute . Esto se posicionará en relación con el primer elemento principal que encuentre con una position igual a relative . Así que podemos configurar el encabezado en la parte inferior del contenedor col-wrap con el siguiente código:

HTML

 

left column

Title or Caption

CSS

 .col-wrap { overflow: hidden; position: relative; } .col-wrap > .col > h2{ position: absolute; bottom: 0; } 

Una cosa que debemos ajustar ahora es que el encabezado está posicionado en forma absoluta, se saca del flujo de documentos y ya no ocupa espacio. Una manera difícil de evitar esto es doblar las tags de encabezado y usar una como marcador de posición.

HTML

 

Title or Caption

Title or Caption

Descripción rápida de CSS:

 visibility: hidden; /* hides an element but still takes up the same space*/ display: none; /* hides an element and collapses*/ 

Usando eso:

  • En una pantalla grande, utilizaremos el encabezado relativo como un marcador de posición al configurar la visibility en hidden y posicionar el encabezado absoluto en la parte inferior de su abuelo.
  • En una pantalla pequeña, colapsaremos el encabezado absoluto, ya que no necesitamos más posicionamiento absoluto, por lo que el primero seguirá en línea y no necesitamos ambos.

En CSS, se verá así:

 @media (min-width: 768px) { .col > h2.absolute{ position: absolute; bottom: 0; } .col > h2.relative{ visibility: hidden; } } @media (max-width: 767px) { .col > h2.absolute{ display: none; } } 

Finalmente , dado que el elemento h2 está posicionado en forma absoluta, la columna ya no actúa como un contenedor para evitar que el texto se derrame. Podemos solucionar esto aplicando algunas restricciones de tamaño en nuestros elementos visibles absolutamente posicionados. Esto se debe hacer para imitar las restricciones del marcador de posición para que se alineen.

Podemos aplicar una clase span4 al encabezado absoluto, así como al siguiente CSS

 

Title or Caption

 .col > h2.absolute{ margin-left:0; padding-right:40px; } 

Manifestación

jsFiddle

Se verá así:

manifestación