将块排列在CSS中的“网格”3 x Y中

Question

我有一些图像及其描述，我需要以一种网格排列。

主要问题是图像描述应该完全可见，因此每条线的高度由更大的描述决定。

这是我的CSS

.mediaContainer {
    margin:10px;
    width:600px;
}
.media {
    float:left;
    width:150px;
    margin:5px;
}
.picture {
    width:150px;
    height:100px;
}
.label {
    text-align:center;
}

示例的jsfiddle：http://jsfiddle.net/csYjC/2200/

Answer 1

而不是float使用display: inline-block。

http://jsfiddle.net/csYjC/2201/

.media {
    width:150px;
    margin:5px;
    display: inline-block;
    vertical-align: top;
}

Answer 2

使用:nth-child()

.media:nth-child(3n-2) {
    clear: left;   
}

这将选择每个第3个.media元素，并向后退两个元素以进行最终选择。因此，将选择每三个项目中的第一个项目。您添加一个clear属性以强制该元素清除其前面的其他浮动元素。