在wordpress WP_Query中将左侧位置和顶部位置放置在post循环中

Question

我已经完成了三栏的布置从一个教程。这是很棒的。但我想要一个样式表包括在"div“中。现在我就这样出去了

<div class="post-col1" id="post-125">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>
</div>

我用过的代码是

<?php if (have_posts ()):?>
<?php $col = 1;
while($loop->have_posts()): $loop->the_post();?>
<?php if ($col == 1)?>
<div class = "post-col<?php echo $col; ?>" id = "post-<?php the_ID();?>" style=" top: 0; left: 305; ">
  <h4 class="member-name"> <a href = "<?php the_permalink(); ?>" title = "<?php the_title(); ?>"><?php the_title();?> </a> </h4>
  <h4 class="phone-number"><?php echo get_post_meta($post->ID, 'members_phone-one',true) ?></h4>


  </div>
  <?php
  if($col == 1) {$col = 2;} else {
  if($col != 1) {
  if($col == 3) {$col = 1;}
  if($col == 2) {$col = 3;}
  }
  }
  endwhile; ?>  
</div>

现在，我想在这个循环中包含一个样式表。所以我的输出应该会喜欢这个。

<div class="post-col1" id="post-125" style="
    top: 0;
    left: 0;
">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>

      </div>
<div class="post-col2" id="post-125" style="
    top: 0;
    left: 300;
">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>

      </div>
<div class="post-col3" id="post-125" style="
    top: 0;
    left: 600;
">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>

      </div>
<div class="post-col1" id="post-125" style="
    top: 300;
    left: 0;
">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>

      </div>
<div class="post-col1" id="post-125" style="
    top: 300;
    left: 600;
">
      <h4 class="member-name"> <a href="/TantraProjects/Ranjit/mdmar/members/tshgueuj/" title="Tshgueuj">Tshgueuj </a> </h4>
      <h4 class="phone-number">34543</h4>

      </div>

希望这是可以理解的。如果是的话，请帮帮我。

Answer 1

由于已经分配了一个post-colN类，所以可以在样式表中分配left属性，而不是在HTML中编写它们：

.post-col1 { left: 0; }
.post-col2 { left: 300px; }
.post-col3 { left: 600px; }

然后，这样的东西应该可以工作(我还没有测试过，但希望您可以纠正任何类型的输入)：

<?php if (have_posts ()):
    $col = 1;
    $top = 0;
    while($loop->have_posts()):
        $loop->the_post(); ?>
        <div class="post-col<?php echo $col; ?>" id="post-<?php the_ID();?>" style="top: <?php echo $top; ?>px;">
            <h4 class="member-name"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
            <h4 class="phone-number"><?php echo get_post_meta($post->ID, 'members_phone-one',true) ?></h4>
        </div>
        <?php
        $col++;
        if ($col > 3) {
            $col = 1;
            $top += 300;
        }
    endwhile;
endif; ?>