以垂直行显示 HTML 元素行答案

【问题标题】：Displaying Rows of HTML Elements in Vertical Rows以垂直行显示 HTML 元素行
【发布时间】：2013-04-13 12:02:55
【问题描述】：

我想在我的 Virtuemart 网上商店中显示一个类别列表，垂直排序方式与此演示中所示的方式相同： http://www.inkplant.com/code/mysql-vertical-sort.php

所以我借用了代码：

    <?php
$cols = 4; //number of columns, you can set this to any positive integer
$values = array();
$result = mysql_query("SELECT * FROM states ORDER BY name");
$numrows = mysql_num_rows($result);
$rows_per_col = ceil($numrows / $cols);
for ($c=1;$c<=$cols;$c++) { $values['col_'.$c] = array(); }
$c = 1;
$r = 1;
while ($row = mysql_fetch_assoc($result)) {
    $values['col_'.$c][$r] = stripslashes($row['name']);
    if ($r == $rows_per_col) { $c++; $r = 1; } else { $r++; }
}
echo "<table>" ;
for ($r=1;$r<=$rows_per_col;$r++) {
    echo "<tr>" ;
    for ($c=1;$c<=$cols;$c++) { echo "<td>".$values['col_'.$c][$r]."</td>" ; }
    echo "</tr>" ;
}
echo "</table>" ;
unset($values);
?>

然后我尝试在我的 Virtuemart 类别模板文件中修改它，结果如下：

<?php
$cols = 3; //number of columns, you can set this to any positive integer
$values = array();

$numrows = $precounterdigit;

$rows_per_col = ceil($numrows / $cols);
for ($c=1;$c<=$cols;$c++) { $values['col_'.$c] = array(); }
$c = 1;
$r = 1;
foreach ( $this->category->children as $category ) {
$catname = $category->category_name;
$caturl = JRoute::_ ( 'index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id );
$values['col_'.$c][$r] = '<div class="category floatleft'.$category_cellwidth.'">
<div class="spacer"><h2>
                            <a href="'.$caturl.'" title="'.$catname.'">
                            '.$catname.'<br /></a></h2>
                                    </div></div>';  

    if ($r == $rows_per_col) { $c++; $r = 1; } else { $r++; }
}
echo '<div class="tablediv">' ;
for ($r=1;$r<=$rows_per_col;$r++) {
    echo '<div class="row">' ;
    for ($c=1;$c<=$cols;$c++) { echo $values['col_'.$c][$r]; }
    echo '</div>' ;
}
echo '</div>' ;
unset($values);
?>

如果类别的数量可被 3 整除或可被 3 -1 整除，它实际上在类别视图中完美显示。这意味着如果页面上有 3、5、6、8、9、11、12 等...类别，它会正确显示。

如果类别的数量等于一个可被 3 +1 整除的数字，那么它会以一种奇怪的方式显示..

下面是一个在有 9 个类别时如何显示的示例：

第 1 类 |四类 |七类
类别 2 |超五类 |八类
三类 |六类 | Cat9

下面是一个在有 8 个类别时如何显示的示例：

第 1 类 |四类 |七类
类别 2 |超五类 |八类
三类 |六类 |

我真的想不通这个，所以我希望有人能在这里帮助我一点..

【问题讨论】：

我认为这是一个 css 问题，你能显示为你的表格 div 生成的 html 吗？
你是对的。我发现我的问题可以通过对“行”类进行一些小的 css 调整来解决。

标签： php html sorting

【解决方案1】：

试试这个，当然你可以改变列和行。

<?php //user210424 
$cols = 3;
$rows = 3;
$j = 0;
$array = array("ONE","TWO","THREE","FOUR","FIVE","SIX","SEVEN","EIGHT","NINE");

for($i=1; $i<=$cols; $i++) {
echo "<div class='col' style='float:left;'>";
    for($j; $j<$rows*$i; $j++) {
        echo "<div class='row'>".$array[$j]."</div>";
    }
echo "</div>";
}
?>

【讨论】：

我刚刚发现我的代码实际上是完美无缺的。我只需要调整一点 CSS。具体来说，我应用了 width: 100%;和显示：表格；到“行”类。