CSS float:left 导致缩略图彼此对齐对角线...>.<

Question

我在更新网站结构时遇到了这个奇怪的问题。

网站网址是http://nailian.ca。

我每页有很多，但是当我给他们一个

缩略图{float:left;宽度：150px；高度：200px；边距：6px;}

他们开始在我的首页上相互对齐对角线。

我知道它与 CSS 的其他部分有关，因为我可以在在线练习板上毫无问题地完成这个技巧。

但是为什么在我的网站上它表现得如此喜怒无常！！？？

Answer 1

最初的问题是你的 html 结构是这样的：

1. .thumbnails 是您的图片的容器。
2. 这意味着您在每个图像之间有一些帖子容器 原因。
3. 您应该将帖子从中间移开或放置所有图片 在一篇文章中。

（请注意，帖子容器是空的。）

Answer 2

通过添加float: right;来更改.hentry, .no-results{}

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 之间并导致问题，向它们添加浮点数会给它们0 宽度，解决问题（这不是一个很难解决的问题）

Answer 3

在每个 .thumbnail 之后都有一个 ARTICLE 标签，这会弄乱 CSS，即缩略图不在容器中，但是有多少个缩略图就有多少文章。所以要么从方程中删除文章，要么使用本杰明的解决方案。