我正在制作一个产品屏幕，我已经制作了一个我想到的 Paint 示例。
大黑块是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">×</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>';
}
}
}?>