Выравнивание длинных заголовков в ответной сетке CSS

Question

Я построил сетку 3x3 с поддержкой CSS. Каждый раздел содержит изображение и заголовок. В некоторых строках у меня есть 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.

Более длинный заголовок в первом столбце отбрасывает нижеследующие разделы.

Помимо установки минимальной высоты для каждого столбца, есть ли лучший способ исправить это? Я использую медиа-запросы для увеличения ширины раздела до 48%, когда размер экрана падает ниже 768 пикселей.

Answer 1

Заменен float:leftdisplay:inline-block в классе .third устранит вашу проблему. Я обновил класс .third. Проверьте Обновленной скрипку Sample

Fiddle Sample