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代码，以便使用＆＃39; grid-sizer＆＃39;类的空列表项。被删除，循环中的锚标记包含在列表项中。它应该看起来像这样，而不是你现在拥有的：

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

网格元素未正确对齐

1 个答案: