Question

我慢慢地，但确定地看到我的网站的外观。但我对网格的CSS有点麻烦。

我设法用简单的div来布局网格，但我有一个常见的问题，如果我有一个占用多行的标题，它会抛弃对齐并且看起来很邋..我该怎样修理这样的东西？

我希望文本块的顶部全部彼此对齐。符合最长标题块的底部。

以下是我正在使用的代码

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，但你去了

CSS用于从循环柱中对齐网格元素

1 个答案: