对齐盒子和尺寸儿童

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

将.picture宽度更改为18.484％，如下所示：

.picture {
    width: 18.484%;
    margin: 5px;   
    float: left;
}

.description {
    background-color: orange;
}

并添加jQuery脚本，如下所示：

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".description"));
});

请参阅更新后的jfiddle。

Answer 2

检查这个小提琴：http://jsfiddle.net/VYZEx/

我刚刚给css添加了一行代码，只要您不介意橙色框具有固定大小，就可以正常工作，在这种情况下更改此内容并且您将成为完成：

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

祝你好运！

Answer 3

你有JSFiddle希望这是你的目标;

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

    float: left;
}

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

    background-color: chartreuse;
}

.description {
    background-color: orange;
    height: 20px;
    overflow: auto;
    cursor: pointer;
    text-align: center;
}

.description::-webkit-scrollbar{
   display: none; 
}

我保持描述大小不变，而是使其可滚动。

Answer 4

为.picture框架赋予相对位置，使描述位置相对并将其放置在.picture框架的底部，然后给它100％宽度以占据整个容器。

.picture {
    width: 20%;
    margin: 5px;
    float: left;
    position: relative;
}

.image {
    width: 100%;
    height: 200px;
    background-color: chartreuse;
}

.description {
    background-color: orange;
    position:absolute;
    bottom:0;
    width:100%;
}

http://jsfiddle.net/PW3GV/8/

Answer 5

以下是我如何使用.picture的相对定位和.description的绝对定位。

看我的jsfiddle： http://jsfiddle.net/PW3GV/9/

.picture { width: 20%; margin: 5px; float: left; position:relative; } .description { background-color: orange; position:absolute; bottom:0; width:100%; }