2

在 foreach 循环中使用单独的类反转第二个 div 集顺序。这将是一个架子状的结构。我试着轮流.tl .tr上课。

或者

我们可以使用 css 来对齐第二组吗？

在此处输入图像描述

代码：

<?php foreach ($products as $product) { ?>
  <div class="row">
    <div class="shelf">

      <div class="span4"><span class="tl">
        <?php if ($product['thumb']) { ?>
        <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a>
        <?php } ?>
        </span></div>

      <div class="span2">
        <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
          <?php } ?>
        </div>
        <?php } ?>
        <div class="cart">
          <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
        </div>
      </div>

       <div class="span2">Span 2</div>
       <div class="span4"><span class="tr">Span4</span></div>


    </div>
  </div>
  <?php } ?>

CSS：

  .shelf .tl {
    margin-left: 58px;
  }
  .shelf .tr {
    margin-left: -33px;
  }
4

1 回答 1

1

我认为这会解决问题，它实现了一个计数器来跟踪当前产品应该在左边还是右边 

$product_counter = 0;
<?php foreach ($products as $product) { ?>
  <?php $product_counter++; ?>

  <?php if(!($product_counter%2 ==0)) { ?>

  <div class="row">
    <div class="shelf">
      <div class="span4">
        // image echo code here
      </div>
      <div class="span2">
        // price, add to cart etc
      </div>

<?php } else { ?>

   <div class="span2">
     // price, add to cart etc
   </div>
   <div class="span4">
     // image echo code here
   </div>

  </div>   <!-- shelf div closing tag -->

  </div>   <!-- row div closing tag -->

  <?php } ?> <!-- closing else -->
  <?php } ?> <!-- closing foreach-->

<!-- in case if there were odd numbers of total product, then close the row and shelf div after foreach -->
<?php if(!($product_counter%2 ==0)) { ?>
 </div>
 </div>
<? } ?>
于 2013-07-13T05:16:20.893 回答