2013-04-27 34 views
6

Tôi có một trang HTML có chứa inline-block div s với chiều cao biến (được đánh dấu bằng .banner lớp):yếu tố theo chiều dọc sắp xếp inline-block với độ cao khác nhau

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

Họ có độ rộng khác nhau và được bổ sung trong thời gian chạy . Bố cục trang web trông xấu xí và các biểu ngữ không được căn chỉnh theo chiều dọc.

Vì lý do không xác định, div không bắt đầu từ góc trên cùng bên trái, nhưng có một số không gian trống ở trên cùng. Làm thế nào để bạn căn chỉnh nó và biểu ngữ tiếp theo theo chiều dọc (ví dụ: làm cho các đường dưới cùng của chúng được căn chỉnh)?

Tôi đang sử dụng jQuery, jQueryUI và ASP.NET MVC2.

Trả lời

10
.banner { 
display: inline-block; 
vertical-align:middle; 
} 
Các vấn đề liên quan