1

我目前正在开发一个 wp 主题项目，我正在尝试在 12 个网格布局中的 class = "span6" 上实现循环，这样它将生成我所有 wp 帖子的 2 col 杂志网格结构。但是不同的跨度六不会正确对齐，只有前两个对齐得很好。在静态页面中，我通常会像这样实现网格布局： 

<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
...and so on

但是，由于著名的 wp 循环只需要一个 span6，我无法使用这种方法。

我该怎么做才能使生成的其他 span6 正确对齐？

我注意到问题来自`.row-fluid`左边距，我还检查了this，this等等......但没有人回答我关于在wp循环中生成span6的问题

这是我的页面的样子：

<div class="span8">
   <?php if(have_posts()): while(have_posts()): the_post();?>
   <article class="span6">
       <div>
         //content goes in here
       </div>
    </article>
    <?php endwhile; else: ?>
    <p><h3>Sorry, No Post Available.</h3></p>
    <?php endif; ?>
</div>
<div class="span4">
 <?php get_sidebar()?>
</div>

我当前的输出看起来像这样`在此处输入代码`

但我真正想要的是这样的东西：
`在此处输入代码`

请问有什么帮助吗？

4

1 回答 1

1

在这种情况下，我通常会使用$counter变量。把它放在你的后面the_post();

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<?php
    //echo post here
    the_title();
    the_content();
?>

</div> <!-- close .post div -->

<?php
    $counter++;
    if ($counter % 2 == 0) {
    echo '<div style="clear:both;"></div>';
    }
?>


<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

您将用于上述代码的 CSS 将是：

.post{
    float:left;
    width:300px; /* width of the post */
}

我想这就是你要找的东西？

于 2013-02-28T00:33:30.980 回答