0

复杂的网格布局

I'm currently trying to wrap the first 2 posts in a div with the video and then output the remaining posts with a div wrapped around every 3 posts, as per image.

the line

if( $wp_query->current_post < 2 ): 

i've also tried with

if($count < 2)

heres a condensed version of what i have so far: Any suggesttions would be really appreciated.

<div class="row-fluid">
    <div class="span8">
        <video></video>
    </div>
    <?php $count = 1; ?>
    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php if( $wp_query->current_post < 2 ):?>
    <div class="span4">
                   // content
    </div>
    <?php if($count % 2 == 0) {
        echo '</div><div class="row-fluid">';
    }?>

    <?php else: ?>

    <div class="span4">
        //content
    </div>
    <?php if($count % 3 == 0) {
        echo '</div><div class="row-fluid">';
    }?>
    <?php $count++;?>
    <?php endif; ?>
    <?php endwhile; ?>
    <?php echo '</div>'; ?>
</div>
<?php else : ?>
<article>default wp stuff</article>
<?php endif; ?>
4

1 回答 1

1

我认为这是一个更简单的解决方案,只需回显所有内容并使用 css (float: left) 正确定位内容。

<div style="width: 900px;">
  <div style="float: left; width: 600px; height: 400px;">
      some content
  </div>
  <?php foreach($post_list as $post_item): ?>
    <div style="float: left; width: 300px; height: 200px;">
      <?= $post->getContent(); ?> or what ever you use
    </div>
  <?php endforeach; ?>
  <br style="clear: left; display: none;" />
</div>

请注意,我对 CSS 的经验并不多,但我希望这可以为您指明正确的方向。

于 2013-04-10T11:18:15.530 回答