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

问题

I have a 3-column listing (data coming from api). Each page has a limit of 30. I've managed to put the listing into 3 columns.

I'm having some problems with my code where when it's on a bigger screen, it is no longer a 3-column layout and each column has more than 10 data.

Questions:

1) How do I make sure that this layout stays a 3-column layout even when it goes on a bigger screen?

2) How do I put a limit of 10 in each column?

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

回答1:

You should draw 3 different <ul> to make sure you are getting 3 columns.
Move the <ul> tag outside the foreach.

Use if(($i % 10) == 0) where $i is the counter to limit 10 <li> in each <ul> and close the </ul> and at the same time start new one <ul> but look for if it is the last iteration (end ( $model['id'] ) == $d['id']) then do not start a new <ul>.

See below code

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

The minimum Css you would need to show them in a row

#native ul {
    display: inline-block;
}

回答2:

Try the following code. It shows contents of an array with x elements in a html table containing a fixed number of rows. In order to use you own data, replace the lines:

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

and

$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>";

?>

If you want to display the data in a table with fixed number of columns, then replace the following in the above code:

/** 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;
}

with

/** 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;
}

来源：https://stackoverflow.com/questions/49441466/3-column-layout-how-to-have-a-limit-in-each-column

标签

php

css

Yii

yii1.x