在网格中对齐照片和标题答案

【问题标题】：Align photos and captions in a grid在网格中对齐照片和标题
【发布时间】：2014-01-09 19:24:56
【问题描述】：

我正在尝试将四张图片与其标题对齐在一个方形网格中。

我正在使用以下 HTML 代码：

<div class="grid">
    <div class="post-block">
        <img src="img1.jpg" />
        <div class="caption">caption1</div>
    </div>
    <div class="post-block">
        <img src="img2.jpg" />
        <div class="caption">caption2</div>
    </div>
    <div class="post-block">
        <img src="img3.jpg" />
        <div class="caption">caption3</div>
    </div>
    <div class="post-block">
        <img src="img4.jpg" />
        <div class="caption">caption4</div>
    </div>
</div>

以及以下 CSS 代码：

.post-block {
    display: inline-block;
    position: relative;
    text-align: center;
}

如果图像和标题大小相同，一切正常，但当它们不同时，我会得到这个（示例）：

我尝试使用 CSS 对齐不同大小的图像和标题，但没有成功。我需要这样的东西：

任何帮助将不胜感激。

提前致谢

【问题讨论】：

标签： layout vertical-alignment

【解决方案1】：

您需要在同一 DOM 级别为图像和标题使用单独的块元素，以实现您在“右”图像中显示的内容。现在您的标题 DIV 嵌套在图像 DIV 中，这将执行您所显示的操作。标题 DIV 需要在图像 DIV 之外。

【讨论】：

那么，我是否需要将 img 标签包装在另一个 div 标签中，与标题分开？

【解决方案2】：

您可能需要在每 2 张照片周围使用两个单独的 div 包装器。然后将图像垂直对齐到底部。 Vertical align images to bottom

<div class="myWrapClass">
        <img src="my image">
        <img src="my image">
    </div>
    <div class="myWrapClass">
        <img src="my image">
        <img src="my image">
    </div>

然后通过内联或您的 css 文件设置样式

<div style="vertical-align:bottom;">

或

.myWrapClass{
vertical-align:bottom;
}

查看此站点...使用那里的 css 属性使其保持响应 Example

【讨论】：

但是，我需要网格来响应，我认为你的解决方案不是