wordpress - 为什么这个简单的网格布局会中断？（调试一些基本的 HTML/CSS）

Question

以下页面是 wordpress 投资组合网站的缩略图库：

http://rosspw.com/snippets/

我试图解决的问题是了解为什么三列画廊网格布局被破坏——它显示前三个缩略图，然后破坏网格布局。

画廊网格是使用以下 wordpress/php 代码创建的：

<div id="project-thumbs">       
<?php
                    query_posts( array(
                        'ignore_sticky_posts' => 1,                     
                        'posts_per_page' => 24,
                        'post_type' => array('snippet')
                        )); ?>                              
                    <?php  while (have_posts()) : the_post(); ?>
                        <div class="project-box one-third float-left">      
                            <?php get_template_part( 'part-project-thumb'); ?>
                        </div>
                <?php endwhile; ?>
                <?php wp_reset_query(); ?>      
        </div>

此外，我用于“project-thumbs”的 CSS 样式如下：

#project-thumbs {
margin: 0 auto;
text-align: center;
min-height: 625px;
padding-top: 35px;

}

你能帮我理解为什么在六个缩略图之后网格布局会中断吗？谢谢！

Answer 1

像这样向您的 .project-box 类添加高度：

.project-box { height: 250px; }

您的浮动元素的高度不同，因此浮动被破坏了。