Question

即时通讯使用smarty引擎我需要一些帮助我的列表显示差距当一些季节有比最后一集更多的情节所以它显示差距我希望它自动调整差距当一些季节有比上一个更多的情节。这是我聪明的代码。

<div class="seasons">
{foreach from=$episodes key=id item=val name=episode_loop}
    {if !isset($lastSeason)}
        <div class="tv_container">

            <h2>Season {$val.season}</h2>
    {elseif $lastSeason != $val.season}
        </div>
        <div class="tv_container" style="float: left;">

            <h2>Season {$val.season}</h2>
    {/if}
<ul class="listings episodeListings">
 <li class="">
 {if $global_settings.seo_links}
                    <a class="link" href="{$baseurl}/{$routes.show}/{$val.perma}/season/{$val.season}/episode/{$val.episode}" title="{$val.episodetitle}">{if $val.episodetitle}
                    <span class="epnum">({$val.episode.embeds|@count} links)</span>
                    <span class="">{$val.episodetitle|truncate:50:"...":true}</span>{/if}</a>
                {else}
                    <a class="link" href="{$baseurl}/index.php?menu=episode&perma={$val.perma}&season={$val.season}&episode={$val.episode}" title="{$lang.show_episode_title|replace:'#season#':$val.season|replace:'#episode#':$val.episode}">{$lang.show_episode_title|replace:'#season#':$val.season|replace:'#episode#':$val.episode}<div class="left">
{foreach from=$val.languages item=flag key=k}
<img src="{$embed_languages[$flag].flag}" style="margin-right: 5px;"/>
{/foreach}
</div>   </a>
                {/if}
                </li>    
            </ul>
        {assign var=lastSeason value=$val.season}
{/foreach}
</div>
<div class="clear"></div>
</div>

这里有一个fiddle例子我希望赛季第14季能够在第17季自动调整，这只是一个例子，有些时候赛季有12场比赛和其他20场，所以它会产生很大的差距我只想在每个赛季自动调整下一季无论有多少剧集。

Answer 1

这是您想要实现的布局类型吗？

enter image description here

Answer 2

EDIT2：另一种可行的脏方法（但不是很漂亮）是将2个div浮动，但将所有内容输出到一列（宽度与之后的两列相同）然后使用javascript检查每个季节的高度并将其放在正确的列中：跟踪到目前为止的高度，并将其放置在＆＃34;较短的＆＃34;一。这样＆＃34; flow＆＃34;该文件仍然有点有序。

编辑：我刚看到那不是目标。抱歉，错误的解决方案和经验丰富的人可以告诉我，无论如何我都应该把它放在这里或删除它...

我对一个问题的猜测/理解是你希望让季节垂直对齐 - 这样所有的季节都从相同的高度开始，例如一个季节左侧有10个部分，旁边有另一个季节有20个，左下方有一个空格＆＃34;列＆＃34; （只有10集的季节）然后下两季将开始垂直对齐。请参阅updated fiddle以更好地了解结果如何

如果这是您正在寻找的结果，您所要做的就是清除浮点数，一种简单的方法是在应该组合在一起的列之间添加div

<div class="clear-floats"></div>

然后在css中添加此

.clear-floats { clear:both; }

考虑到你有一列的固定宽度，我猜你不总是想要只有2列但它应该是＆＃34;尽可能多的＃34;到屏幕宽度？如果是这种情况我的第一个猜测是制作一些javascript来获得屏幕宽度并将其除以一列的宽度，然后插入这个＆＃34;清除divs＆＃34;在每第n列之后。但我确信有一些更好的方式（希望）指出

希望至少有一点帮助

有列表问题

2 个答案: