垂直对齐具有不同高度的内联块元素

And*_*rus 6 html css banner

我有一个HTML页面,其中包含div具有可变高度的内联块(标有.banner类):

<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;
}
Run Code Online (Sandbox Code Playgroud)

它们具有不同的宽度,并在运行时添加.网站布局看起来很丑,横幅没有垂直对齐.

由于未知原因,div不会从左上角开始,但顶部有一些空白区域.如何垂直对齐它和下一个横幅(例如使它们的底线对齐)?

我正在使用jQuery,jQueryUI和ASP.NET MVC2.

jey*_*aof 10

.banner {
display: inline-block;
vertical-align:middle;
}
Run Code Online (Sandbox Code Playgroud)