对列表有疑问

Question

我正在使用智能引擎，我只需要一点帮助，当某一季的剧集比上一季更多时，我的列表显示出差距，所以它显示了差距，我想让它在某一季比上一季更多的时候自动调整差距。这是我的聪明代码。

<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

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

​

​

Answer 2

EDIT2:另一个可行的方法(但不是很好)是让2个div浮动，但将所有内容输出到一列(宽度与之后的两列相同)，然后使用javascript检查每个季节的高度并将其放入正确的列中:跟踪到目前为止的高度，并将其放在“较短”的列中。这样的话，文档的“流”仍然是有序的。

编辑:我刚刚看到这并不是我们的目标。对于错误的解决方案，很抱歉，经验丰富的人可以告诉我，我是应该保留它还是删除它……

我对一个问题的猜测/理解是，你想要让季节垂直排列--这样所有的季节都在相同的高度开始，例如，当一个季节有10个部分在左边，另一个季节在它旁边有20个部分时，在左边的“栏”(只有10集的季节)下会有一个空白区域，然后下两个季节就会垂直排列。有关结果的更好信息，请参阅updated fiddle

如果这就是您要寻找的结果，那么您需要做的就是清除浮动，一种简单的方法是在应该组合在一起的列之间添加一个div

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

然后在css中添加这个

.clear-floats { clear:both; }

考虑到你有一个固定的一列宽度，我猜你并不总是想要只有两列，但它应该是“尽可能多地”到屏幕宽度？如果是这样的话，我的第一个猜测是编写一些javascript来获得屏幕宽度，并将其除以一列的宽度，然后在每第n列之后插入这个"clear div“。但我相信有些人(希望)会指出一个更好的方法

希望这至少能帮上点忙