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 theforeach
. 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屋!
- You should draw 3 different