verticalmente allineamento elementi inline-block con differenti altezze

Ho una pagina HTML che contiene inline-block div s con altezza variabile (contrassegnati con .banner classi):verticalmente allineamento elementi inline-block con differenti altezze

<html> 
<head> 
<body> 
<div id="container"> 
<div id="header" style="margin: 0; width: 100%"> 
<div> 
    <div class='banner'> ... </div> 
    <div class='banner'> ... </div> 
    <div class='banner'> ... </div> 
    </div> 

.banner { 
    display: inline-block; 
}

hanno diverse larghezze e sono aggiunti a runtime . Il layout del sito sembra brutto e i banner non sono allineati verticalmente.

Per motivi sconosciuti, div non viene avviato dall'angolo in alto a sinistra, ma c'è spazio vuoto in alto. Come si allineano verticalmente il banner successivo (ad esempio si allineano le linee di fondo)?

Sto utilizzando jQuery, jQueryUI e ASP.NET MVC2.

fonte

2013-04-27 Andrus

.banner { 
display: inline-block; 
vertical-align:middle; 
}

fonte

2013-04-27 13:22:06

verticalmente allineamento elementi inline-block con differenti altezze

risposta

Problemi correlati