css - 不同高度的 float

Question

有什么方法可以使所有列表项的高度相同？我搜索了这个网站并找到了这个解决方案，但如果我添加 float:left 它对我不起作用.我需要 float:left每 4 张图像后换行。

        ul.Gallery{display:table-row;}
        ul.Gallery li{float:left;list-style:none;margin:0 5px 5px 0;
    display:table-cell;background:red;}

    <ul class="Gallery">
    <li><img src="image1.jpg"><p>description1</p></li>
<li><img src="image2.jpg"><p>description2</p></li>
<li><img src="image3.jpg"><p>description3</p></li>
<li><img src="image4.jpg"><p>description4 description4 description4 description4 description4 description4</p></li>
<li><img src="image5.jpg"><p>description5</p></li>

    </ul>

这是我需要的:

如果某些图像没有任何描述或描述长度不同，这就是我得到的结果。:

我无法设置width或 min-heigth对于 <li>元素，因为并非所有图像都有描述，并且描述长度可能有很大差异。

我不想为此目的使用 javascript。

Answer 1

试试这个(稍微编辑一下代码):

ul.Gallery{display:block; padding:0; margin:0;}
ul.Gallery li{
padding:0;
background:red;
display:inline-block;
vertical-align: top;
width:23%;
margin:0 1% 5px 0;}
img {max-width: 100%; height: auto;}

http://jsfiddle.net/uR9YV/