具有不同<li>高度</li>的图像列表

Question

我有一个简单的图像列表，其中每个<li>元素具有由.container强制执行的相同静态高度。 然而，所选元素可以高2（或3）倍

我试图通过使用display:inline-block来实现它，但是所选元素正在推动下一行降低 http://jsfiddle.net/HedZK/1/

或float:left工作得更好但没有被捕获，一些元素仍被推低 http://jsfiddle.net/HedZK/2/

有没有办法正确地做到这一点？

我不想position:absolute使用<table>，因为它会导致响应式设计崩溃

Answer 1

仅使用css无法解决此问题。您应该查看一些基于js的解决方案，例如http://isotope.metafizzy.co/

Answer 2

我想请在一个地方检查你的代码：

<div class="container" style=" height: 200px ">
                <img src="" alt="">
            </div>

我认为身高：200px 会导致问题。删除高度：200px