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。

Answer 2

你需要一些JavaScript来制作这个结构而不关心每个元素的高度。看看Masonry（http://masonry.desandro.com/），我觉得它会很好用。它甚至不需要jQuery。

正确浮动不同高度的div

2 个答案: