在 CSS 响应式网格上对齐长标题

Question

我构建了一个 CSS 响应式 3x3 网格。每个部分都包含一个图像和标题。在某些行中，我有 1 个长标题和 2 个短标题。

CSS

.third {
    width: 32%;
    float: left;
    margin: 0 2% 2% 0;
}
.last {
    margin: 0 0 2% 0;
}
.entry-thumbnail {
    margin-bottom: 24px;
}
.entry-thumbnail img {
    display: block;
    height: auto;
    max-width: 100%;
}

HTML（前三节）

<section class="third">
    <div class="entry-thumbnail">
        <img src="http://bbc.in/1FG55RM" alt="Squirrel">
    </div>
    <header class="entry-header">
        <h1>Longer Title Here</h1>
    </header>
</section>

<section class="third">
    <div class="entry-thumbnail">
        <img src="http://bbc.in/1FG55RM" alt="Squirrel">
    </div>
    <header class="entry-header">
        <h1>Short Title</h1>
    </header>
</section>

<section class="third last">
    <div class="entry-thumbnail">
        <img src="http://bbc.in/1FG55RM" alt="Squirrel">
    </div>
    <header class="entry-header">
        <h1>Short Title</h1>
    </header>
</section>

我使用的方法导致屏幕尺寸低于 1436px 时网格中断：http://jsfiddle.net/2cp1dcjs.

第一列中较长的标题将下面的部分下推。

除了为每列设置最小高度之外，还有更好的方法来解决这个问题吗？一旦屏幕尺寸降至 768 像素以下，我将使用媒体查询将部分宽度增加到 48%。

Answer 1

将 float:left 替换为 display:inline-block 中的 class .third 将解决您的问题。我更新了 class .third。检查更新后的 fiddle 样本

Fiddle Sample

在 CSS 响应式网格上对齐长标题

Aligning Long Titles on CSS Responsive Grid

html

css

grid-layout