H2 all'interno div offset strano blocco inline

Question

Ho uno che circonda uno <div> che ha anche alcune immagini, un <h2> e un paragrafo di testo. I <a> sono tutti inline-block. Ogni volta che H2 si estende su due righe, il successivo <a> viene sfalsato. Di seguito è uno screenshot.

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; 
}  

Se qualcuno conosce una sorta di proprietà CSS per evitare questo che sarebbe estremamente utile. Grazie.

Answer 1

perché l'elemento a è allineato verticalmente verso il basso. Poiché hai 2 righe di testo, l'altezza aumenta e non si adatta. Prova questo:

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

EDIT

Questa modifica viene dopo la domanda di Imray.

Ho testato nuovamente il codice in Ubuntu 12.04 LTS - Chrome 33.0.1750.152 dopo quasi 2 anni questa domanda è stata risolta e ho scoperto che - ora - quando si rimuove la proprietà vertical-align il codice tende a funzionare altrettanto bene . Tuttavia, insieme a questo se rimuovi la proprietà overflow vedrai che la visualizzazione si interrompe.

Sopra aumentando l'altezza, in realtà intendevo l'altezza della linea. Questo è il mio male, non sono nativo scusa.

Ora, immaginate il seguente caso:

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

Quando i valori di default sono in element 1 e element 2 saranno allineati alla linea di base del loro contenitore e questa linea di base variazioni - ovviamente - a seconda dell'altezza del contenitore, che alla fine viene determinato dall'altezza dei loro figli - se non specificato diversamente.

A quanto pare, al momento della scrittura - in attuazione css dei browser tendono a cambiare nel tempo, eliminando vertical-align: bottom e lasciando la overflow: hidden sembra rendere il codice di lavoro - non testato in altri browser -, ma poi di nuovo semplicemente allineandoli a in alto, dovrebbe risolvere completamente il problema perché quando si allinea in alto, gli elementi nelle linee successive saranno allineati alla cima della linea.