【问题标题】:Generating multiple columns from a dynamically generated list in PHP从 PHP 中动态生成的列表生成多列
【发布时间】:2014-03-31 17:02:37
【问题描述】:

我有一个生成 UL LI 语句的脚本,并创建一个单列列表,现在我需要修改它,而不是一个长列表,我将它分成几列,每列有 10 个元素,直到最后。

    for ($i=0;$i<sizeof($manufacturer_sidebox_array);$i++) {

  $content = '';
  $content .= '<li ><a class="hide" href="' . zen_href_link(FILENAME_DEFAULT,   'manufacturers_id=' . $manufacturer_sidebox_array[$i]['id']) . '">';
  $content .= $manufacturer_sidebox_array[$i]['text'];
  $content .= '</a></li>' . "\n";
  echo $content;
}

我想弄清楚的是如何以我可以创建列的方式插入一些 if 语句。

现在的输出是:

Col1

首先 第二 第三 第四 第五 第六 . . . 第二十次

我想要的是:

Col1 Col2 Col3 ... Col6

前 11 日 21 日 . . . 10日20日30日

【问题讨论】:

  • 并且您希望这些列垂直堆叠在一起,并且所有部分都属于同一个 HTML 列表?
  • 你好。我在下面为您发布了答案。看看吧,让我知道你的想法。

标签: php dynamic multiple-columns megamenu


【解决方案1】:

这会将数组分成十个一组,将每个组包装在一个column div 中。请注意,我们在循环之前开始第一个 div,并在循环之后结束最后一个 div。在 10 个条目处中断的关键部分是模运算符 - % - 你可以阅读它 in the PHP documentation

echo '<div class="menuColumn">';

for ($i=0; $i<count($manufacturer_sidebox_array); $i++) {

    if ($i % 10 == 0){
        echo '</div><div class="menuColumn">';
    }

    $content = '';
    $content .= '<li ><a class="hide" href="' . zen_href_link(FILENAME_DEFAULT,   'manufacturers_id=' . $manufacturer_sidebox_array[$i]['id']) . '">';
    $content .= $manufacturer_sidebox_array[$i]['text'];
    $content .= '</a></li>' . "\n";
    echo $content;

}

echo '</div>';

您还需要这种 CSS 样式来使列水平堆叠,而不是默认的垂直堆叠。显然,您可以根据自己的喜好调整边距:

<style>
.menuColumn{
    display:inline-block;
    margin:10px;
    vertical-align: text-top;
}
</style>

【讨论】:

  • 谢谢,我会尝试并告诉你,我已经有列类,但你的要好得多.. ;)
  • 好的,我已经尝试过你的解决方案并且它工作了......部分是因为它搞砸了整个网站你想要我发布整个 css 文件和 php 代码,所以你可以采取看?看来您的附加 div 搞砸了当前的 div。
  • 如果您已经有一个列类,我只需将我的新类更改为 echo '&lt;/div&gt;&lt;div class="menuColumn"&gt;'; 并将 CSS 更改为 .menuColumn{ 并保持其他样式不变。这是你做的,还是你做了一个混合体?
  • @RickFitzgerald 好的,很高兴听到。如果你能接受我的回答,那就太好了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-29
  • 1970-01-01
  • 1970-01-01
  • 2015-09-07
  • 1970-01-01
  • 2012-07-01
相关资源
最近更新 更多