html - 奇怪的网格 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 {文本对齐：中心；宽度：100 像素；边距：0 0 0 0；}

Answer 3

可能不是这个问题最漂亮的解决方案，但这应该可以防止行不一致。如果标题过长，您可能需要应用更大的 margin-bottom 或 padding-bottom。

.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

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

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