如何连续显示项目（即每行5项）

Question

我有一个从控制器在我的视图页面上显示标签。我想每行显示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>';
         }
     }

目前我正在获得这样的输出

Answer 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

Answer 2

尝试为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>';
         }

Answer 3

你可以使用css

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

根据您的行数调整宽度。

 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>';

Answer 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, ...}

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

Answer 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