每 3 列数据生成一个新的 div 行答案

【问题标题】：Generate a new div row per 3 colums of data每 3 列数据生成一个新的 div 行
【发布时间】：2014-02-10 12:56:20
【问题描述】：

我在使用此代码时遇到问题，该代码创建了一个带有来自给定 RSS 链接的链接的 index.html 文件。我正在尝试在index.html 结束文件中为每个 RSS 源生成一列，并且这些列将按每行 3 进行分组。

因此，在脚本处理完 RSS 链接数组的第三个链接后，我想在新行中重复该过程，但我没有得到正确的顺序，我想计算或插入结束和打开 <div> 标签。

<?php

require_once('magpierss/rss_fetch.inc'); // RSS library to fetch RSS news

$rss_links = array(
    'NYT World' => 'http://rss.nytimes.com/services/xml/rss/nyt/World.xml',
    'NYT US' => 'http://rss.nytimes.com/services/xml/rss/nyt/US.xml',
    'NYT Business' => 'http://rss.nytimes.com/services/xml/rss/nyt/Business.xml',
    'NYT Technology' => 'http://rss.nytimes.com/services/xml/rss/nyt/Technology.xml',
    'NYT Sports' => 'http://rss.nytimes.com/services/xml/rss/nyt/Sports.xml'
    );

$limit = 10; // Notice limit per RSS
$count = 0;

if ($limit) {
    $per_column = floor((count($rss_links) * $limit) / 3);
} else {
    foreach ($rss_links as $url) {
        $rss = fetch_rss($url);
        $count += count($rss->items);
    }

    $per_column = floor($count / 3);
}

$html = '<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RSS GENERATE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">';

$count = 0;
$rowCount = 0;
// print_r($rss_links);
// break;
foreach ($rss_links as $url) {

    if ($rowCount % 3 === 0) {
        $html .= '</div><div class="row">';
    }

    $rss = fetch_rss($url);

    if ($count == 0) {
        $html .= '<div class="col-xs-6 col-sm-4">
        <h1>'.$rss->channel['title'].'</h1>
        <ul class="list-unstyled">';
    }

    // $html .= '<h1>'.$rss->channel['title'].'</h1>';
    $c = 0;

    foreach ($rss->items as $item) {
        $html .= '<li><a href="' . $item['link'] . '">' . $item['title'] . $count .'</a></li>';
        $count++; $c++;

        if ($limit && $limit == $c) {
            continue(2);
        }

        if ($count == ($per_column + 1)) {
            $count = 0;
            $html .= '</ul></div><div class="col-xs-6 col-sm-4">
            <ul class="list-unstyled">';
        }
    }
    $rowCount++;
}

$html .= '</ul>
</div>
</div>
</div>
</body>
</html>';

file_put_contents('index.html', $html);
?>

【问题讨论】：

你得到了什么输出？显示输出。还要举一个你想要的输出的例子。

标签： javascript php html css twitter-bootstrap-3

【解决方案1】：

这是我在 PHP 中“计数”的方式：

$count = 0;
$count_total = 10; // or use dynamic count: count($all_posts)
$columns = 3;
foreach ( $all_posts as $k=>$v ) {
    $count++;
    $is_first_column = $is_last_column = false; // always set to false, then set to true only when the condition matches!
    // Now check is this a post for the first column
    if( $count==1 || ($count-1)%$columns==0 ) { // check if it's 1st and every 4,7,10 post and place it in 'column 1'
        // set additional class for every post that need to be placed in the first column
        $current_column_in_row = 1;
        $is_first_column = true;
    }
    else {
        $current_column_in_row = ($count-1)%$columns + 1;
        // for rows 4,7: (4-1)%3+1=(7-1)%3+1=1
        // for rows 2,5,8: (2-1)%3+1=(5-1)%3+1=2
        // for rows 3,6,9: (3-1)%3+1=(6-1)%3+1=3
    }

    if( $count>=$count_total ) {
        $is_last_column = true;
    }
}

“$current_column_in_row = ($count-1)%$columns + 1;”这一行未经测试（我通常只标记第一列/最后一列），但它应该正确计数......

CSS：

这是另一个问题的建议解决方案：https://stackoverflow.com/a/21202987/3205524

您可以像这样轻松地使用 CSS 清除每个 .column_1 的浮动：

.column_1 {
    clear: both;
}

这样每个 .column_1 都会转到新行！

【讨论】：