1

私は現在wpテーマプロジェクトに取り組んでおり、すべてのwp投稿の2列のマガジングリッド構造を生成するように、12グリッドレイアウトのクラス="span6"にループを実装しようとしています。しかし、異なるスパン6は適切に位置合わせされず、最初の2つだけが適切に位置合わせされます。静的ページでは、通常、次のようにグリッドレイアウトを実装します。 

<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ループには1つのspan6しか必要ないため、この方法は実行できません。

生成された他のspan6を正しく整列させるにはどうすればよいですか？

問題が`.row-fluid`の左マージンにあることに気づきました。これ、これ、その他多くのこともチェックしました...しかし、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 に答える