我正在慢慢但肯定地了解我的网站外观。但我在网格的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/
您可以在这里使用几种方法：
使用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，但现在可以使用