根据生成的内容创建宽度%

时间:2014-03-27 23:14:54

标签: html css wordpress

我想知道是否有办法根据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%的宽度,是否有某种方法可以做到这一点?

2 个答案:

答案 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
}
  1. 因此,使用Wordpress函数计算帖子
  2. 根据显示的帖子数量生成变量(因此get_query_var()
  3. 将该变量应用于循环中的div
  4. 希望有所帮助。如果您需要澄清,请告诉我。

答案 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>