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; ?>

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

1 个答案: