Неупорядоченный список Clearfix

Question

У меня есть неупорядоченный список, и каждый элемент списка содержит фотографию и заголовок. Мой CSS устанавливает сетку как сетку, где каждая строка содержит три фотографии. Иногда заголовок (или заголовок фотографии) длиннее ширины фотографии и должен охватывать две строки. В некоторых ситуациях, когда текст охватывает 2 + строки, элемент списка под ним попадает вправо, и в списке есть большой пробел. Единственное исправление, которое работает для меня, заключается в добавлении следующего HTML <div style="clear:both"></div> после каждых трех <li></li> элементов. Эту проблему можно увидеть в третьей строке элементов списка. Я попытался изучить эту проблему, но не нашел метод только CSS. В моем примере кода я применил класс clearfix CSS, но он, похоже, не имеет никакого эффекта.

Я использую последнюю версию Google Chrome.

Вот мой код: http://jsfiddle.net/NVveP/1/

Answer 1

Имея как float: left и display: inline-block будет фактически свести на нет display: inline-block, потому что float: left forces display: block.

Следовательно, удаление float: left позволяет работать display: inline-block, что в сочетании с vertical-align: top - это то, как вы можете достичь желаемого расположения.

См:http://jsfiddle.net/thirtydot/NVveP/3/

Я также добавил хак, чтобы сделать display: inline-block работу в IE7, если это имеет значение.

Было бы сложнее сделать это с помощью поплавков. Вы должны были бы что-то эффект:

li:nth-child(3n+1) { 
    clear: both; 
} 

который имеет проблему не работает в старых браузерах, таких как IE7/8. К счастью, нет необходимости беспокоиться об этом, потому что display: inline-block является решением здесь, а не плавает.