html - 正确 float 不同高度的div

Question

我无法让我的列表项正确显示!

我希望它是这样的:http://i.imgur.com/yi1Uepr.png

现在它看起来像这样:http://i.imgur.com/R9R8R8v.png

我知道这个有一个“名称”，但我找不到它所以我开始这个问题，请帮忙!

HTML:

    <li>
    <img src="http://vinebox.co/proxy/http___v.cdn.vine.co/r/thumbs/11F2FCA00E1016207155612794880_19600f95230.4.4.10195081721815085090.mp4_dzi7hfWQ0FtLGkGihe1TIN.TpZVQEoRCKTMZ_HkMtwN93uiELhX20LOXy4v7.46M.jpg">
       <a class="user-link" href="#">ChrisChin<span class="date">8h</span></a>
       <span>
            Come say hi to us on Omegle!
       </span>
    </li>

CSS:

.vines ul {}

.vines ul li { 
background:#FFF; 
width:180px; 
display: inline-block; 
padding:10px; -webkit-box-shadow:  1px 1px 2px 0px #dcdcdc; 
border-radius: 3px;        
box-shadow:  1px 1px 2px 0px #dcdcdc; margin:15px; 
}

Answer 1

您需要设置 vertical-align:top 但这不是您想要的。您的模板是行设计的，但您想要的是列设计。所以你需要改变你的 html。