網格元素沒有正確對齊

Question

我有一個WordPress的網站（你可以看到在duncanhill.com.au問題）

如果你看的網站，前3個屬性框中正確對齊，但是第四和第五做一些奇怪的東西。

的代碼看起來是這樣的：

HTML：

<div id="grid-gallery" class="grid-gallery"> 
<section class="grid-wrap"> 
    <ul class="grid"> 
     <li class="grid-sizer"></li><!-- for Masonry column width --> 

     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <a href="<?php the_permalink(); ?>"> 
      <li> 

       <figure> 
        <div class="figimg"><?php the_post_thumbnail(); ?></div> 
        <figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption> 
       </figure> 

      </li> 
      </a> 
     <?php endwhile; else: ?> 
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
     <?php endif; ?> 
    </ul> 
</section><!-- // grid-wrap --> 

CSS：

/* General style */ 
.grid-gallery ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.grid-gallery figure { 
    margin: 0; 
} 

.grid-gallery figure img/*.figimg*/ { 
    display: block; 
    /*width: 100%; 
    height: 100%;*/ 
    /*height: 210px;*/ 
    border-top-right-radius: 5px; 
    border-top-left-radius:5px; 
} 

.grid-gallery figcaption h3 { 
    margin: 0; 
    padding: 0 0 0.5em; 
} 

.grid-gallery figcaption p { 
    margin: 0; 
} 

/* Grid style */ 
.grid-wrap { 
    max-width: 69em; 
    margin: 0 auto; 
    padding: 0 1em 1.875em; 
} 

.grid { 
    margin: 0 auto; 
} 

.grid li { 
    width: 33%; 
    float: left; 
    cursor: pointer; 
} 

.grid figure { 
    padding: 15px; 
    -webkit-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 

.grid li:hover figure { 
    opacity: 0.7; 
} 

.grid figcaption { 
font-family: 'lato'; 
font-weight: 300; 
color: #000000; 

padding: 25px; 
border-left-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-width: 2px; 
border-color: #4B91F0; 
border-bottom-left-radius:5px; 
border-bottom-right-radius:5px; 
} 

.figtitle{ 
font-family: 'lato'; 
font-weight: 400; 
} 

.figdesc{ 

} 

.price{ 
font-weight: 400; 
color: #E74C3C; 
} 

我真的無法工作，如何解決它！ 任何幫助對齊方塊將不勝感激！

感謝， 湯姆

Answer 1

有你需要做的來解決這個問題兩件事情，跟你張貼的HTML做第一個。

首先，在上面更改您的HTML代碼，以便刪除「grid-sizer」類的空列表項，並且您的循環內的錨標記包含在列表項中。它應該是這樣的，而不是你目前有：

<div id="grid-gallery" class="grid-gallery"> 
<section class="grid-wrap"> 
    <ul class="grid">  
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <li> 
       <a href="<?php the_permalink(); ?>"> 
        <figure> 
         <div class="figimg"><?php the_post_thumbnail(); ?></div> 
         <figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption> 
        </figure> 
       </a> 
      </li>     
     <?php endwhile; else: ?> 
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
     <?php endif; ?> 
    </ul> 
</section><!-- // grid-wrap --> 

二，添加以下樣式到你的CSS：

.grid :nth-child(3n+1) { 
    clear: left; 
}