如何逐行显示项目（即每行 5 个项目）答案

【问题标题】：how to show items in a row wise (i.e 5 items per rows)如何逐行显示项目（即每行 5 个项目）
【发布时间】：2013-05-09 20:01:55
【问题描述】：

我必须在控制器的视图页面上显示标签。我想每行显示 5 个标签，目前我下面的代码每行显示 1 个标签。请帮我怎么做？

 $query = $this->tagsmodel->fetch_all_tags($postnumbers, $offset);
  if (is_array($query))
     {
        foreach ($query as $row) 
         {
            $content = substr(strip_tags($row->tags_name), 0, 180); 
            echo '<div class="parent" id='.$row->tags_id.'>';
            echo '<a class="tagsbtn" href="" >'.$content.'</a>';
            echo '</div>';
         }
     }

目前我得到这样的输出

【问题讨论】：

我不太确定您要做什么，但 div 元素上的 display: inline-block 或 float: left 应该会有所帮助。
@RoryMcCrossan 我更新了我的问题，请看一下

标签： php jquery html css codeigniter

【解决方案1】：

$count=0; $query = $this->tagsmodel->fetch_all_tags($postnumbers, $offset); if (is_array($query)) { foreach ($query as $row) { $count++; $content = substr(strip_tags($row->tags_name), 0, 180); echo '<div class="parent" style='float:left;' id='.$row->tags_id.'>'; echo '<a class="tagsbtn" href="" >'.$content.'</a>'; echo '</div>'; if($count%5==0) { echo "<div style='clear:both'></div>"; } } }

所以现在每行会显示 5 个 div

【讨论】：

【解决方案2】：

你可以用css来做

.main {
    width : 400px;
}    
.main .parent{
    float : left;
    margin-right : 10px;
}

调整宽度，你会得到一行5个标签。

 echo "<div class='main'>";
 foreach ($query as $row) 
 {
            $content = substr(strip_tags($row->tags_name), 0, 180); 
            echo '<div class="parent" id='.$row->tags_id.'>';
            echo '<a class="tagsbtn" href="" >'.$content.'</a>';
            echo '</div>';
         }
echo '</div>';

【讨论】：

No More Posts div 即将上线，标签 div 显示与之前相同
因此您可以为标签添加另一个 div。您也可以为该 div 应用相同的 css。
请检查我是否已编辑我的问题。所有标签都有一个带有 main 类的全局 div
还是小问题，显示输出像这样i.stack.imgur.com/0Ny95.png
让我们continue this discussion in chat

【解决方案3】：

尝试为您的 div style="float: left;" 设置浮动：

foreach ($query as $row) 
         {
            $content = substr(strip_tags($row->tags_name), 0, 180); 
            echo '<div class="parent" id='.$row->tags_id.' style="float: left;">';
            echo '<a class="tagsbtn" href="" >'.$content.'</a>';
            echo '</div>';
         }

【讨论】：

【解决方案4】：

您可以使用 Kasyx 解决方案，但无法控制每行显示的标签数量。默认情况下，每次显示标签的宽度变大时，它都会填充您的 div 并换行。

在循环中使用计数器来控制显示的标签的确切数量。您可能需要为您的 div 设置固定宽度和/或使用溢出。

你的 DOM 应该是这样的

<div id="main">
    <div class="rowdiv">
        <div class="parent"><a ... >foo</a></div>
        <div class="parent"><a ... >bar</a></div>
        ...
    </div>

和 css 属性：

.parent { float : left, ...} .rowdiv{ clear : both, ...}

您唯一需要做的就是在循环中使用模数并每 5 次迭代创建一个新的“rowdiv”。

【讨论】：

【解决方案5】：

PHP

echo '<ul>';
foreach ($query as $row) 
{
    $content = substr(strip_tags($row->tags_name), 0, 180); 
    echo '<li id="'.$row->tags_id.'">';
    echo '<a class="tagsbtn" href="#">'.$content.'</a>';
    echo '</li>';
}
echo '</ul>';

CSS

ul {style-list-type:none}
ul li {display:block;float:left
ul li:nth-child(5n+1) {clear:left}

更新

这将使您的标签具有动态宽度

新的工作示例 jsFiddle

【讨论】：