Странно выглядящая сетка 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 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

я установил бы поля на 0 для ".float р"

.float р {.float р {выравнивания текста: центр; ширина: 100px; margin: 0 0 0 0;}

Answer 3

Возможно, это не самое прекрасное решение этой проблемы, но это должно остановить строки из-за непоследовательности. Возможно, вам нужно наложить более крупное нижнее или нижнее дно, если надпись будет длинной.

.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

Wrap каждая строка из 5 элементов в DIV, и дать ему класс clearfix, в вашем CSS дополнения:

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