2

foreach ループで別のクラスを使用して 2 番目の div セットの順序を逆にします。棚のような構造になります。.tl .trクラス替えをしてみました。

また

css を使用して 2 番目のセットを揃えることはできますか。

ここに画像の説明を入力

コード：

<?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 に答える