奇怪的看网格CSS

Question

我正在尝试制作带字幕的图像网格。我使用简单的CSS来创建网格。

CSS：

.float{float:left;padding:20;}
.float img{ width:80px; height:100px; padding:0;}
.float p {text-align:center; margin-top:0;width:100px;}

然后使用相同的格式打印出几个div：

<div class="float">
<img src="noimage.jpeg"></img>
<p>Movie Title</p>
</div>

问题是标题（在这种情况下为电影标题）总是很长，有时跨越多行，我得到一个看起来像这样的网格：

我是否可以在CSS中更改以保持图像一致？

Answer 1

在text-align:center; height:180px;类

中提及.float

.float{float:left;padding:20; text-align:center; height:180px;}

我认为这将解决您的问题。

Answer 2

我会将“.float p”

的边距设置为0

.float p {.float p {text-align：center;宽度：100像素; 保证金：0 0 0 0; }

Answer 3

可能不是这个问题的最美妙的解决方案，但这应该阻止行不一致。如果标题变长，也许您需要应用更大的边距底部或填充底部。

.float {
    position: relative;
    float:left;
    padding:20px 20px 45px;
    margin: 0 0 15px;
}

.float p {
    position: absolute;
    top: 105px;
    left: 0;
    padding: 0 20px;
    text-align:center;
    width: 80px; 
}

Answer 4

在div中包装5行元素的每一行，并在CSS添加中给它一类clearfix：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}