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

Question

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

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