html - float 容器，使它们都在底部

Question

我有一个 ul 列表，其中有几个 li 元素需要向左浮动。每个 li 包含一个可变高度的图像，150px 或 200px。所以我们得到的是多个盒子(li)，里面有图像。这是 li 中的确切 html

<li class="photo">
<a href="#" class="photo-link">
        <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
        <span class="photo-title">MrSpock</span>
    </a>
</li> 

现在，如果任何 li 元素中的图像高度为 200px，并且相邻的 li 具有高度为 150px 的图像，则图像高度为 150px 的 li 堆叠在高度为 200px 的 li 的右上边缘。 (记住两者都向左浮动)

我希望 li 元素堆叠起来，就好像它们是放在地板上的不同高度的盒子一样。

限制:我无法更改此 html，可以有多个 li 元素，在这种情况下图像会流到下一行。我们事先不知道一行中的所有图像是否具有相同或不同的高度。

有没有可能的 CSS 解决方案？这是我的问题的链接: https://dl.dropboxusercontent.com/u/88049315/home.html我希望第一行中的容器都在底部对齐。

Answer 1

这个呢fiddle ？

<div id="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

---

 #container
    {
        width:200px;
        height:200px;
        background-color:#333;
        display:table-cell;
        vertical-align:bottom
    }

    .content
    {
        width:48px;
        height:48px;
        background-color:red;
        float:left;
        margin: 1px;
    }

只要所有 float 内容的宽度不大于容器的宽度，一切都很好。之后， float 功能接管并将第一行定位在底部上方一行。

否则，您可以旋转 conainer div，以便其中的所有内容都随之移动。这更像是一种 hacky 方式，可能会导致进一步的问题。 The Fiddle