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

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

最佳答案

您应该绘制3个不同的<ul>以确保获得3列。
将<ul>标记移到foreach之外。
使用if(($i % 10) == 0)，其中$i是计数器，以限制每个<li>中的10个<ul>并关闭</ul>，同时启动一个新的<ul>，但要查找是否是最后一次迭代，然后不要启动新的(end ( $model['id'] ) == $d['id'])。

见下面的代码

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

关于php - 3列布局-如何在每列中限制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49441466/