1

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

目前我得到这样的输出 在此处输入图像描述

4

5 回答 5

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

于 2013-05-15T10:28:20.133 回答
0

尝试为您的 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>';
         }
于 2013-05-15T09:50:08.857 回答
0

您可以使用 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>';
于 2013-05-15T09:52:06.903 回答
0

您可以使用 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”。

于 2013-05-15T10:01:17.810 回答
0

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

于 2013-05-15T10:26:39.437 回答