Html 浮动容器，使其都位于底部

我有一个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唯一的解决方案可以做到这一点？以下是我的问题的链接： 我希望第一行中的容器都在底部对齐。

这个怎么样

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

---

否则，可以旋转conainer div，使其中的所有内容都与之匹配。这更像是一种黑客行为，可能会导致问题进一步恶化

为什么你不能更改html？你尝试过什么css？老实说，这是我正在做的一个挑战的一部分，它有一个限制，html不能更改。但即使在现实世界中，我也听说过这样的场景：网站使用CMS，有时他们从某处获取html，并希望您仅使用该html进行样式设置@otherDewi：看到我尝试的链接，最初的挑战要求我将容器排成一行，所有我做过的事情，但无法使容器与MrSpock底部对齐。伙计们，我最终自己解决了这个问题，但是我为将一个假设传递给大家而道歉。所面临的挑战是设计一个未知数量的图像，使它们堆叠在一个页面上，并且底部对齐。我的假设是，浮动是唯一的选择，当我问我的问题说容器是浮动的时，我有点忽略了这一点。解决方案是使用“显示：内联块”，这与堆叠图像并流向下一行的效果相同，但也会使它们底部对齐，这样即使它们的高度可变，较短的图像仍位于行的底部。谢谢您的回答。否。这里您已经固定了.content的宽度，不幸的是，在我的例子中，这可能会有所不同-取决于图像的高度是200px还是150px。但我仍然希望容器的底边与同一行中的所有其他容器对齐。

<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;
    }