html - 网格元素未正确对齐

Question

我有一个 wordpress 网站(你可以在 duncanhill.com.au 查看问题)

如果您查看该网站，前 3 个属性框正确对齐，但是第 4 个和第 5 个属性框有些奇怪。

代码如下所示:

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”的空列表项，并且循环中的 anchor 标记包含在列表项中。它应该看起来像这样，而不是您当前拥有的:

<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;
}