砌體爲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最近的帖子不能正確顯示

回答

相關問題