Выровняйте динамическое количество пролетов с сопровождающими UL рядом

Question

У меня есть HTML-контент, который генерирует динамическое количество элементов span с сопровождающими UL.Из-за того, как генерируются промежутки и UL, они записываются в установленном порядке.

Я стремлюсь добиться, чтобы каждый промежуток проходил через верх, а затем под ним находился сопровождающий UL.

Вот сегмент HTML:

<div id="suggested" >                  
  [% FOR row IN suggestions  %]
  [% "<span>" row.0 "</span><div class="clear"></div><ul>" "" IF loop.first %]
  [% FOR u in row %]
  [% IF loop.index > 0  %]
    <li><a name="sugg" href='[% script_name %]/register?key=[% u %]' value="[% u %]">[% u %]</a>
      [% END %]
        [% "</ul>" IF loop.last %]                             
         [% END %]
          [% END %]
           </div>

и CSS:

    #suggested 
{
  width:100%;
  height: 400px;
  display: block;

}

.clear {
 clear:both;   
}

#suggested ul
{
    display:inline-block;
    width: 20%;  
    list-style: none; 
    float:left;
    margin: 0 4px;
  padding: 0;
  text-align:left;
  overflow: hidden;

}
#suggested span {

    width: 20%;
    border-bottom: 1px #000 dotted;
    display:inline-block;

}
#suggested ul li:nth-child(2n+1) {
    background: #eee;
}

#suggested ul li 
{   

    width: 100%; 
    margin: 5px 0;
  padding: 2px;
  text-align:left;
  text-overflow: ellipsis;
  display: table;
  word-wrap: normal;
}

Вывод не то, что я хочу, вместо этого элементы span плавают влево к ULно я хочу, чтобы они плавали влево к предыдущему элементу span и чтобы UL ассоциировался с плавающим span в левом направлении к предыдущему UL.

Таким образом, формируется что-то вроде:

<span><span><span><span><span>
 <ul>  <ul>  <ul>  <ul>  <ul> 

Но по мереВы сказали, что каждая пара span и UL создается последовательно.

Есть идеи, как мне достичь желаемого?

Answer 1

Это эффект, который вы собираетесь получить?

http://jsfiddle.net/meEMp/