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堆叠在li的右上边缘，高度为200px。（记住两个都漂浮在左边）

我希望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;
    }

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

否则你可以旋转conainer div，使其中的所有内容都随之而来。这更像是一种hacky方式，可能会引发更多问题。 The Fiddle

浮动容器，使它们都在底部

1 个答案: