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。

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

除了为每列设置最小高度外，还有更好的解决方法吗？一旦屏幕尺寸降至768px以下，我就会使用媒体查询将截面宽度增加到48％。

Answer 1

在float:left课程中使用display:inline-block替换.third将解决您的问题。我已更新了课程.third。检查更新的小提琴样本

Fiddle Sample

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

1 个答案: