Question

我正在制作产品屏幕，我已经制作了一个我想到的Paint示例。 Example productscreen

大黑块是productView，后面有一个滑动容器。我想按字母顺序排序这些产品（所有这些小的roundend块都是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，你可以像小提琴一样生成标记。以后你可以使用jQuery来做到这一点。我不知道如何通过使用Php来做同样的事情。

浮动div从上到下

1 个答案: