砌体为Wordpress最近的帖子不能正确显示

我想实现一个网站的主要图像下的砌体画廊。我甚至不确定我是否接近成功。目前，缩略图排成一行，但只有四行而不是五行，并且它们并不是彼此填满白色空间，显然是期望的结果。砌体为Wordpress最近的帖子不能正确显示

这里的CSS：

#mason { 
    width:  950px; /* width of the entire container for the wall */ 
     margin-bottom: 10px; 
} 

.brick { 
    width:  20%; /* width of each brick less the padding inbetween */ 
    margin: 0; 
    display:inline-table; 
}

这里的HTML：

<div id="mason"> 
<?php 
$temp = $wp_query; 
$wp_query= null; 
$wp_query = new WP_Query(); 
$wp_query->query('posts_per_page=100'.'&paged='.$paged); 
while ($wp_query->have_posts()) : $wp_query->the_post(); 
?> 
<div class="brick"> 
<div class="brick_featured_image"> 
<?php if (has_post_thumbnail()) { 
$size=75; 
?> 
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>"> 
<?php the_post_thumbnail($size); } ?> 
</a> 
</div> 
</div> 
<?php endwhile;?> 
<?php $wp_query = null; $wp_query = $temp;?> 
</div>

这里是我已经加入到我的functions.php：

function mason_script() { 
    wp_enqueue_script('jquery-masonry'); 
} 
add_action('wp_enqueue_scripts', 'mason_script');

这里是我添加脚本到我的页脚：

<script> 
jQuery(document).ready(function($) { 
    $('#mason').masonry({ columnWidth: 190 }); 
}); 
</script>

我跟着这个网站的步骤： http://pastebin.com/y0D0NDSf

所有的一切都目前可以看这里： http://cks.whiterabbitstudio.us/test-3/

在此先感谢您的帮助！

来源

2015-10-16 ursalarose

这是CSS ...顺便声明两次（你正在加载你的网站style.css文件两次）。

这应该让您的轨道上：

.#wrapper { 
    padding: 5px 0px 40px 5px; 
} 

.brick { 
    margin: 0 0 5px 0; 
}

来源

2015-10-16 23:15:19 Aibrean

在你的回应你的意思写 “＃包装。”？并排除“#mason”？ – ursalarose

我删除了第二个样式表调用并添加了CSS更改，但代码仍然产生相同的结果。 – ursalarose

如果我将'float：left;'添加到'.brick' css，那么它会显示为截图中的图片，第7篇文章出现在第6篇文章的底部。 – ursalarose

砌体为Wordpress最近的帖子不能正确显示

回答

相关问题