3列布局-如何在每列中有限制答案

【问题标题】：3 column layout - how to have a limit in each column3列布局-如何在每列中有限制
【发布时间】：2018-03-23 02:28:32
【问题描述】：

我有一个 3 列列表（数据来自 api）。每页限制为 30。我已设法将列表分为 3 列。

我的代码出现了一些问题，当它在更大的屏幕上时，它不再是 3 列布局并且每列有超过 10 个数据。

问题：

1) 我如何确保此布局即使在更大的屏幕上也能保持 3 列布局？

2) 如何在每列中设置 10 个限制？

php/html:

    <div id="native" class="margin-top-2x">     
         <ul>
            <?php foreach($model as $d) { ?>
             <li>
                <?php if(!empty($d['id'])): ?>
                <a href="<?php echo $this->createUrl('frontend/detailedView', array('id' => $d['id'])) ?>"><?php echo $d['title'];?> </a>
                <?php endif; ?>
                <br></li>
            <?php } ?>
        </ul>
    </div>

css:

    #native {
      -webkit-column-width: 400px;
      -moz-column-width: 400px;
      -o-column-width: 400px;
      -ms-column-width: 400px;
      column-width: 400px;

    }
    #native ul {
        list-style: none;
    }

【问题讨论】：

标签： php css yii yii1.x

【解决方案1】：

您应该绘制 3 个不同的 <ul> 以确保获得 3 列。
将<ul>标签移到foreach之外。

使用if(($i % 10) == 0)，其中$i 是在每个<ul> 中限制10 个<li> 并关闭</ul> 并同时启动新<ul> 的计数器，但要查找它是否是最后一个迭代(end ( $model['id'] ) == $d['id']) 然后不要开始一个新的<ul>。

见下面代码

<div id="native" class="margin-top-2x">  
    <ul>
        <?php 
           $i=1;
           foreach ( $model as $d ) { ?>
                <?php if ( !empty ( $d['id'] ) ): ?>
                    <li>
                        <a href="<?php echo $this->createUrl ( 'frontend/detailedView' , array( 'id' => $d['id'] ) ) ?>"><?php echo $d['title']; ?> </a>
                    </li>
                <?php endif; ?>
                <br>
            <?php
            if ( ($i % 10) == 0 ) {
                echo "</ul>";
                echo (end ( $model['id'] ) == $d['id']) ? "" : "<ul>";
            }
            $i++;
            ?>
        <?php } ?>
</div>

连续显示它们所需的最小 Css

#native ul {
    display: inline-block;
}

【讨论】：

谢谢你！我试过这个。一切正常，除了我得到一个额外的空
我忘了初始化计数器$i=1; 实际上@rory-h 我刚刚更新了答案
它不应该创建额外的ul，再次验证
我将代码更改为您更新的答案。出于某种原因，我得到了一个额外的 ul - i67.tinypic.com/282125j.png
我无法打开您在 cmets 中发布的图片，似乎是错误的网址？

【解决方案2】：

试试下面的代码。它在包含固定行数的 html 表中显示具有 x 元素的数组的内容。为了使用您自己的数据，请替换以下行：

$model = array_fill(0, 25, "test");

和

$max_rows = 10;

<?php

/** The column counter */
$column_counter = 0;
/** The row counter */
$row_counter    = 0;
/** The total counter */
$total_counter  = 0;
/** The maximum number of columns to show */
$max_columns    = 0;
/** The maximum number of rows */
$max_rows       = 10;
/** A two dimensional array for storing the data */
$data           = array();

/** The sample data */
$model          = array_fill(0, 25, "test");

/** Convert the $model array into a two dimensional array */
foreach($model as $d) {
    /** The data is added to array */
    $data[$row_counter][$column_counter] = $d;

    /** The total counter is increased by 1 */
    $total_counter++;
    /** The row counter is increased by 1 */
    $row_counter++;

    /** If the total counter is divisible by $max_rows, then column counter is increased by 1 and row counter is set to 0 */
    if ($total_counter % $max_rows == 0) {
        $column_counter++;
        $row_counter=0;
    }
}
/** The max columns is set to the column counter */
$max_columns      = $column_counter;
/** The start table tag */
echo "<table>";
/** Display the two dimensional data in html table. Each row is checked */
for ($count1 = 0; $count1 < $max_rows; $count1++) {
    /** The row start tag is displayed */
    echo "<tr>\n";
    for ($count2 = 0; $count2 < $max_columns; $count2++) {
        /** If the column does not exist, then empty column is shown */
        $column_data   = (isset($data[$count1][$count2])) ? $data[$count1][$count2] : "&nbsp;";
        /** The column data is shown */
        echo "<td>" . $column_data . "</td>\n";
    }
    /** The row end tag is displayed */
    echo "</tr>";
}
/** The end table tag */
echo "</table>";

?>

如果你想在一个固定列数的表格中显示数据，那么在上面的代码中替换如下：

/** The row counter is increased by 1 */
$row_counter++;

/** If the total counter is divisible by $max_rows, then column counter is increased by 1 and row counter is set to 0 */
if ($total_counter % $max_rows == 0) {
    $column_counter++;
    $row_counter=0;
}

与

/** The column counter is increased by 1 */
$column_counter++;

/** If the total counter is divisible by $max_columns, then row counter is increased by 1 and column counter is set to 0 */
if ($total_counter % $max_columns == 0) {
   $row_counter++;
   $column_counter=0;
}

【讨论】：