html - 从上到下 float div

Question

我正在制作一个 productscreen，我已经按照我的想法制作了一个 Paint 示例。

黑色的大块是后面有一个滑动容器的productView。我想按字母顺序排列这些产品(所有这些小圆端 block 都是 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>';
                    }
                }      
            }?>

Answer 1

检查这个http://jsfiddle.net/Mzmay/18/

使用 PHP，您可以像在 fiddle 中那样生成标记，稍后您可以使用 jQuery 来执行此操作。我不确定如何仅使用 Php 来做同样的事情。