CSS float: left заставляет миниатюры выравнивать диагонали друг к другу ...>.

Question

Я получаю эту странную проблему при обновлении структуры моего сайта.

URL сайта - http://nailian.ca.

У меня много много на странице, но когда я даю им

thumbnail {float: left; ширина: 150px; высота: 200px; Маржа: 6px;}

они начинают выравнивать диагонали друг на друге на моей первой странице.

Я знаю, что это как-то связано с другими частями CSS, так как я могу сделать этот трюк без проблем на онлайн-доске.

Но почему на моем сайте действует так капризно !! ??

Answer 1

Первоначальная проблема заключается в том, что ваша HTML-структура выглядит следующим образом:

1. .thumbnails - это контейнеры для ваших изображений.
2. Какиеозначает, что у вас есть почтовый контейнер между каждым изображением по какой-то причине.
3. Вы должны убрать пост между или поместить все изображения в одно сообщение.

(обратите внимание, что сообщениеконтейнеры пусты.)

Answer 2

изменить .hentry, .no-results{}, добавив float: right;

HTML-части, такие как

 <article id="post-708" class="post-708 post type-post status-publish format-standard     hentry category-uncategorized">       
   <header class="entry-header">                                           
     <!-- .entry-meta -->                                                
   </header>
   <!-- .entry-header -->           
 </article>

находятся между html-изображениями большого пальца и вызывают проблему, добавляя к ним float, дает им 0 ширину, решая проблему (это довольно сложно исправить)

Answer 3

После каждого .thumbnail у вас есть тег ARTICLE, который портит CSS, то есть миниатюры находятся не в контейнере, но статей столько же, сколько миниатюр. Поэтому либо удалите статьи из уравнения, либо воспользуйтесь решением Бенджамина.