CSS从循环发布中对齐网格元素

Question

我正在慢慢地但一定会弄清楚我网站的外观。 但是我对网格的CSS有点麻烦。

我设法用简单的div布置了网格，但是我遇到一个常见的问题，即如果我的Title占用了多行，它将使对齐方式看起来不整齐。 我将如何解决这样的问题？

我希望文本块的顶部彼此对齐。 与最长的标题栏的底部一致。

这是我正在使用的代码

foreach ( $terms as $term ) {

// The $term is an object, so we don't need to specify the $taxonomy.

    $term_link = get_term_link( $term );

// If there was an error, continue to the next term.
if ( is_wp_error( $term_link ) ) {
    continue;
}

// We successfully got a link. Print it out.
echo '<div class="my-grid"><li><h2><a href="' . esc_url( $term_link ) . '">' .     $term->name . '</a></h2><br/>';
echo  $term->description; // This will return the description of the term
echo '</li></div>';
}

CSS: .my-grid { float:left; width: 270px; margin: 0 2.5% 1em 0;}

样本： http ： //dev.unicriscreations.com/collection/

Answer 1

您可以在此处使用几种方法：

使用PHP进行限制在这种情况下，请确保标题不超过字符数。 您可以在functions.php文件中使用以下代码

function the_titlesmall($before = '', $after = '', $echo = true, $length = false) { $title = get_the_title();

    if ( $length && is_numeric($length) ) {
        $title = substr( $title, 0, $length );
    }

    if ( strlen($title)> 0 ) {
        $title = apply_filters('the_titlesmall', $before . $title . $after, $before, $after);
        if ( $echo )
            echo $title;
        else
            return $title;
    }
}

用CSS限制

h2 {
    width:100%;
    height:40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

用CSS显示全部

h2 {
    width:100%;
    height:120px;
}

在这种情况下，它将显示3行文本，如果需要第4行，则需要通过增加40px（即160px）来更改每行。 但是，当然，您会看到此解决方案背后的问题。 我通常使用的是PHP，但是您可以使用