3 列布局 - 如何在每列中设置限制

Question

我有一个 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;
    }

Answer 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;
}

Answer 2

试试下面的代码。它显示包含固定行数的 html table 中包含 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>";

?>

如果要将数据显示在固定列数的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;
}

3 列布局 - 如何在每列中设置限制

3 column layout - how to have a limit in each column

php

css

yii

yii1.x