html - 对齐盒子和调整 child 的大小

Question

我正在努力使我的 div 框发挥作用。

我希望通过将较小的盒子扩展到与最大的盒子相同的高度，使橙色盒子具有相同的大小。

我还想让第二行的那个合适，向左完美对齐。

HTML

<div class="picture">
    <div class="image"></div>
    <div class="description">A description</div>
</div>

<div class="picture">
    <div class="image"></div>
    <div class="description">A description <br /> Extra line</div>
</div>

<div class="picture">
    <div class="image"></div>
    <div class="description">A description</div>
</div>

<div class="picture">
    <div class="image"></div>
    <div class="description">A description</div>
</div>

<div class="picture">
    <div class="image"></div>
    <div class="description">A description</div>
</div>

CSS:

.picture {
    width: 20%;
    margin: 5px;

    float: left;
}

.image {
    width: 100%;
    height: 200px;

    background-color: chartreuse;
}

.description {
    background-color: orange;
}

JSFiddle 问题:http://jsfiddle.net/PW3GV/1/

编辑

橙色框可以有不同的高度。有时它可能包含 1 行、2 行或 3 行 - 所以固定高度是行不通的

Answer 1

检查这个 fiddle :http://jsfiddle.net/VYZEx/

我刚刚在 css 中添加了一行代码，只要您不介意橙色框具有固定大小，它就可以正常工作，在这种情况下，更改它即可完成:

.description {
    background-color: orange;
    height: 40px;
}

祝你好运!