可以这样做吗？（多列ul）

-1

可以得到一些与Safari 3和Safari浏览器的工作，但即将不会有一块它。我为每个列表输出一个购物分类列表和子分类列表。可以这样做吗？（多列ul）

这是我得到的（不工作到目前为止）..任何帮助将是最受欢迎的。

<div style="float:left; width: 232px;"> 
<? 
$rowcount = 1;       
$strSql = "SELECT * FROM Category ORDER BY CategoryName ASC"; 
$r = $db->select($strSql); 
while ($row=$db->get_row($r, 'MYSQL_ASSOC')) { 
    $CategoryID = $row['CategoryID']; 
    $CategoryName = $row['CategoryName']; 
    ?> 
    <div style="width: 232px; background-color:#f2f2f2; padding: 5px; margin-top: 5px; -webkit-border-radius: 4px; border-radius: 4px; overflow:hidden; padding-left: 5px;"> 
      <h1><a href="/<?=$colour?>/<?=$CategoryURL?>/" ><?=$CategoryName?></a></h1> 
      <ul> 
        <?       
        $strSql2 = "SELECT 
        SubCategory.SubCategoryID, 
        SubCategory.SubCategoryName, 
        SubCategory.SubCategoryURL, 
        SubCategory.CategoryID 
       FROM 
        SubCategory 
       WHERE 
        CategoryID = $CategoryID 
       ORDER BY 
        SubCategoryName"; 
        // echo "<pre>$strSql</pre>"; 
        $r2 = $db->select($strSql2); 
        while ($row2=$db->get_row($r2, 'MYSQL_ASSOC')) { 
         $SubCategoryID = $row2['SubCategoryID']; 
         $SubCategoryName = $row2['SubCategoryName']; 
         $SubCategoryURL = $row2['SubCategoryURL']; 
        ?>  
        <li><a href="/<?=$colour?>/<?=$CategoryURL?>/<?=$SubCategoryURL?>/"><?=$SubCategoryName?> (<?=$rowcount?>)</a></li> 
        <? 
        $rowcount++; 
        if ($rowcount == 35) { echo"</ul></div><div style=\"float:left; width: 232px;\"><ul>"; $rowcount = 0;} 
        } // end get SubCategory 
        ?> 
       <? if ($rowcount == 0) { echo""; } else {echo"</ul>";} ?> 
       </div>  
     <? } // end get category list 
?>  
     </ul> <!-- END CATEGORY UL --> 
    </div> 
</div>

来源

2012-07-17 mlweb

如果这是一个CSS布局问题，那么所有的PHP/MySQL都是不相关的。你可以请张贴输出的HTML标记，而不是PHP吗？ – 2012-07-17 21:13:01

确切的问题是什么？你想让他们连续排队，但他们在每条线都打破？此外，它看起来像你会有一些奇怪的关闭。输出的HTML是你期望看到的吗？我问的原因是如果rowcount == 35你关闭子类别ul并打开另一个div和ul。因此，看起来如果您达到35行，则将其关闭，并结束子类别w /空div和空ul。 – Brodie 2012-07-17 21:26:35

我可以用错误的方法来获得最终结果。最终结果就是你期望看到的是，如果你已经将大量的ul转化为四列布局。如果有一个打开的列表，我希望它包围并继续下一列。理想情况下，我想确定整个列表是否适合列的剩余高度，如果不是完整列表在没有突破的情况下创建新列，但我不知道如何开始工作。 – mlweb 2012-07-17 23:01:49

另一种方法是使用基于表格的布局，在这种情况下，我认为它不会那么糟糕。表格用于表格数据，目录类别适合。 编辑：但是你仍然必须弄清楚你的PHP逻辑才能实现这个功能。在我的部分。

另外，还有Columnizer jQuery plugin自动执行这个技巧，但我不喜欢依赖javascript驱动的布局元素的解决方案。尽管你可以通过Modernizr只触发不支持CSS3方法的浏览器。仍然不是这个的一个巨大的风扇。

你可以发布你在其他浏览器中使用过的CSS3吗？也许有一个可行的解决方法，可以做到这一点。对于最终结果的细节，我仍然有点模糊。我关注的是你的问题的CSS方面，而不是PHP。找到一个可行的CSS驱动的解决方案显然比试图找出逻辑把你的类别分成相应的列要容易得多。

来源

2012-07-17 21:31:53 Daryn

最初使用-moz-column-count：4;在没有rowcount == 35部分的这些列表周围的div上，它生成了很好的格式化为4列的列表（除了ie）。我期待复制gumtree的布局。随着PHP我试图（和失败，因为我很新），以提出一些东西，将倒数x行（在这种情况下35），如果有，并打开UL关闭它。关闭容器div，打开一个新的div，并将其重新开始。我知道我错过了这里的东西..这是我有//www.coloursupermarket.co.uk/xindex.php – mlweb 2012-07-17 22:56:19

http://www.coloursupermarket.co.uk/yindex.php是什么的CSS产生和我很高兴，直到我检查出ie .. – mlweb 2012-07-17 23:08:51

可以这样做吗？ （多列ul）

回答

相关问题

可以这样做吗？（多列ul）