Floating divs從上到下

我正在製作一個產品屏幕，我已經制作了一個Paint示例。 Example productscreen Floating divs從上到下

黑色的大塊是在後面的滑動容器productView。我想按字母順序排列這些產品（所有這些小圓圈塊都是div中的產品）。但是這個順序從開始就是「A」，並且「Z」到slindingcontainer結束。

我想訂購像紅線這樣的產品。我現在有一個模塊的第二個容器，只有這個打破了我的代碼。

是否有其他方式來訂購產品，如我的示例圖紙？

更新 - 現在我的代碼：

  <?php 
      if(!empty($productByType)){ 
       for($i=0;$i < count($productByType); $i++){ 

        $id = $productByType[$i]['id']; 
        $title = $productByType[$i]['title']; 
        $img = base_url('/img/producten/'.$productByType[$i]["img"]); 

        if($i % 2 == 0){ 
         echo '<div class="seperatorforproduct">'; 
         //0,2,4,6,8 
        } 

        ============ 
        Content divs 

        **Example of one product:** (Using modal from bootstrap) 

        echo '<div class="button btnstyle">'; 
        echo '<div class="imgbtn">';  
        // <!-- Picture--> 
        echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />'; 
        echo '</div>'; 
        echo '<div class="txtbtn txtstyle">'; 
        echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>'; 
        echo '</div>'; 
        echo '</div>'; 
        ?> 
        <div class="modal" style="display:none;" id="modal<?=$id?>"> 
         <div class="modal-header"> 
          <a class="close" data-dismiss="modal">&times;</a> 
          <h2><?=$title?></h2> 
         </div> 
         <div class="modal-body"> 
          <div class="modal-left"> 
          <img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" /> 
          </div> 
          <div class="modal-right"> 
          <p><?=$productByType[$i]['info']?></p> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          Telephone number etc. 
         </div> 
        </div> 
        ============ 


        <?php 
        if($i % 2 == 1 || $i == count($productByType)){ 
         // 0,3,6,9,12 
         echo '</div>'; 
        } 
       }  
      }?>

來源

2012-05-03 Loed

總是以每欄的div值表示？如果是的話，把它們包裝在一個父母的div中，然後漂浮這些父母。如果沒有...更困難。 – mddw

+1的繪畫技巧 – RSM

是的，總是兩列在一列。從PHP生成的產品。我現在所做的是，一個foreach循環檢查並放置所有產品。並在此循環中使用模塊進行循環。只有這個打破了我的代碼。 – Loed

入住這http://jsfiddle.net/Mzmay/18/

使用PHP你產生撥弄&這樣的標記後，您可以使用jQuery的做到這一點。我不確定如何通過使用Php來做同樣的事情。

來源

2012-05-03 12:10:28

我試過這個，正是我想到的，只是我完全不理解jQuery代碼。 – Loed

它可以用這個perticulair命令中的表完成嗎？ – Loed

你的意思是你希望按這個順序排列表格單元格？ –

Floating divs從上到下

回答

相關問題