H2 inside div bloque en línea desplazamiento extraño

Question

Tengo un <a> que rodea un <div> que también tiene algunas imágenes, un <h2> y un párrafo de texto. Los <a> son todos inline-block. Cada vez que el H2 se extiende a dos líneas, el siguiente <a> se compensa. Debajo hay una captura de pantalla.

HTML:

<a href="#"> 
    <div> 
     <div class="imgOverflow"> 
      <img src="/hello/there"> 
     </div> 
     <h2>This is the title</h2> 
     <p>This is a paragraph</p> 
    </div> 

</a> 

CSS:

a { 
    display:inline-block; 
    font-size:16px; 
    border:1px solid grey; 
    width:260px; 
    margin:5px; 
    color:black; 
    overflow: hidden; 
} 
div { 
    display:block; 
    padding:5px; 
    width:250px; 
    height:300px; 
} 
p { 
    font-size:12px; 
    text-align:justify; 
} 
h2 { 
    margin:5px 0 10px 0; 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
} 
.imgOverflow { 
    margin:-5px 0 0 -5px; 
    width:260px; 
    padding:0; 
    overflow:hidden; 
    height:130px; 
    display:block; 
}  

Si alguien conoce algún tipo de propiedad CSS para evitar esto que sería de gran ayuda. Gracias.

Answer 1

eso es porque su elemento a se alinea verticalmente en la parte inferior. Como tiene 2 líneas de texto, la altura aumenta y no encaja. Prueba esto:

a { 
display:inline-block; 
font-size:16px; 
border:1px solid grey; 
width:260px; 
margin:5px; 
color:black; 
overflow: hidden; 
vertical-align: top; /* Notice this line */ 
} 

A working example

EDITAR

Esta edición viene después de la pregunta de Imray.

He probado el código una vez más en Ubuntu 12.04 LTS - Chrome 33.0.1750.152 después de casi 2 años se ha respondido esta pregunta, y descubrí que - ahora - cuando quita la propiedad vertical-align el código tiende a funcionar también . Sin embargo, junto con eso si elimina la propiedad overflow, verá que la pantalla se rompe.

Arriba, al aumentar la altura, en realidad me refiero a la altura de la línea. Eso es malo, no soy nativo, lo siento.

Ahora, imaginemos el siguiente caso:

This is our container: 
------------------------------------------------ 
|      Element 2:    | 
| Element 1:  --------------------  | 
| ------------- | Lorem ipsum dolor|  | 
| | Lorem ips | | sit amet   |  | 
| ------------- --------------------  | 
------------------------------------------------ 

Cuando los valores por defecto son en element 1 y element 2 será alineado a la línea de fondo de su contenedor y esta línea de base cambios - obviamente - de acuerdo a la altura del contenedor, que al final se determina por la altura de sus hijos, si no se especifica.

Al parecer, en el momento de la escritura - como la implementación de CSS de los navegadores tienden a cambiar por el tiempo, la eliminación de vertical-align: bottom y dejando el overflow: hidden parece hacer que el código - no ensayado en otros navegadores -, pero, de nuevo, simplemente alineándolos a arriba, debería resolver el problema completamente porque cuando se alinea en la parte superior, los elementos en las líneas siguientes se alinearán a la parte superior de la línea.