如何为wordpress的内容post添加高度?
How to add height for content post of wordpress?
我想让我的 WordPress 内容像块一样。我使用 CSS 和 PHP 制作 4 列的简单代码并且它有效。但我希望内容也具有相同和相等的高度。
我使用了一个功能来限制内容中的字符,但帖子的高度仍然不相等。
function ld_custom_excerpt_length( $length ) { return 10; } add_filter( 'excerpt_length', 'ld_custom_excerpt_length', 999 );
其实我知道我可以给他们 css 的身高,比如
article {height:100px;}
但这样做之后内容将不再有响应。
您可以使用 jQuery 来检测最高的内容并将所有元素的高度设置为最高的。
在这种情况下,#custom_element 是我的容器,其中包含所有 post。
而 .content 是一个容器,其中包含我的文本、图像等...每个 post.
简短示例:
function resizeContent() {
jQuery('#custom_element').each(function(){
// Select and loop the container element of the elements you want to equalise
var highestBox = 0;
jQuery('.content').css("height","");
// Select and loop the elements you want to equalise
jQuery('.content', this).each(function(){
// If this box is higher than the cached highest then store it
if(jQuery(this).height() > highestBox) {
highestBox = jQuery(this).height();
}
});
// Set the height of all those children to whichever was highest
jQuery('.content',this).height(highestBox);
});
}
//adjust dimensions when loaded
jQuery(window).on('load', function () {
resizeContent();
});
//adjust dimensions when window size gets changed
jQuery( window ).resize(function() {
resizeContent();
});
PHP-示例:
<div id="custom_element">
<div class="content"></div>
<div class="content"></div>
.
.
.
</div>
我想让我的 WordPress 内容像块一样。我使用 CSS 和 PHP 制作 4 列的简单代码并且它有效。但我希望内容也具有相同和相等的高度。
我使用了一个功能来限制内容中的字符,但帖子的高度仍然不相等。
function ld_custom_excerpt_length( $length ) { return 10; } add_filter( 'excerpt_length', 'ld_custom_excerpt_length', 999 );
其实我知道我可以给他们 css 的身高,比如
article {height:100px;}
但这样做之后内容将不再有响应。
您可以使用 jQuery 来检测最高的内容并将所有元素的高度设置为最高的。
在这种情况下,#custom_element 是我的容器,其中包含所有 post。
而 .content 是一个容器,其中包含我的文本、图像等...每个 post.
简短示例:
function resizeContent() {
jQuery('#custom_element').each(function(){
// Select and loop the container element of the elements you want to equalise
var highestBox = 0;
jQuery('.content').css("height","");
// Select and loop the elements you want to equalise
jQuery('.content', this).each(function(){
// If this box is higher than the cached highest then store it
if(jQuery(this).height() > highestBox) {
highestBox = jQuery(this).height();
}
});
// Set the height of all those children to whichever was highest
jQuery('.content',this).height(highestBox);
});
}
//adjust dimensions when loaded
jQuery(window).on('load', function () {
resizeContent();
});
//adjust dimensions when window size gets changed
jQuery( window ).resize(function() {
resizeContent();
});
PHP-示例:
<div id="custom_element">
<div class="content"></div>
<div class="content"></div>
.
.
.
</div>