3列布局-如何在每列中有一个限制 [英] 3 column layout - how to have a limit in each column

问题描述

我有一个3列的列表(数据来自api).每页的上限为30.我设法将清单分为3列.

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.

我的代码有一些问题，当它在更大的屏幕上时，它不再是3列的布局，并且每列包含10个以上的数据.

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.

问题:

1)即使在更大的屏幕上，我如何确保该布局仍保持3列布局?

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

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

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

推荐答案

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

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

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

    请参见下面的代码

    <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

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

    #native ul {
        display: inline-block;
    }
    

  这篇关于3列布局-如何在每列中有一个限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！