我想知道是否有办法根据wordpress生成的帖子数量来设定设定的宽度百分比。
我想要做的是创建一行,有时会有3或4个项目,我希望填充100%所以当有4个时每个div为25%但有3个时divs有33%。
<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>
I would give talent a width of 33%, but sometimes it will generate 4 divs
<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>
在这种情况下,我希望它们有25%的宽度,是否有某种方法可以做到这一点?
答案 0 :(得分:0)
是的,这完全可行。首先,您需要计算查询生成的帖子数。类似的东西:
if(have_posts()){
$num_displayed_posts = ($wp_query->found_posts > get_query_var('posts_per_page')) ? get_query_var('posts_per_page') : $wp_query->found_posts;
$layout_class = ($num_displayed_posts > 3) ? '4-col' : '3-col';
//now you can apply this variable to your divs classes
}
get_query_var()
)希望有所帮助。如果您需要澄清,请告诉我。
答案 1 :(得分:0)
您可以使用display:table
http://fiddle.jshell.net/PJ7e8/1/
section {
display:table;
table-layout:fixed;/* will basicly evenly lay cells if no width provided */
width:100%;
}
section div {
display:table-cell;
border:solid;
}
section div:nth-child(odd) {
background:#cde
}
或display:flex
; http://fiddle.jshell.net/PJ7e8/2/
section {
display:flex;
}
section div {
flex:1;/* same value for all , width will evenly be dispatch */
border:solid;
}
section div:nth-child(odd) {
background:#cde
}
使用的HTML:
<section>
<div class="talent">talent</div>
<div class="talent">talent</div>
<div class="talent">talent</div>
</section>