配售DIV与浮动

Question

我有Django的字典一个大名单查看如下：

'description': [ 
     { 
      'name': 'Onderdelen', 
      'good': ['Motor', 'Versnellingsbak', 'Koppeling', 'Carburatie - injectie - Diesel injectie + verstuivers'], 
      'trace_of_use': ['Differentieel', 'Batterij', 'Radiator', 'Alternator', 'Startmotor'], 
      'to_repair': ['Cardanhoezen', 'Uitlaat', 'Aandrijfriemen van accessoires'], 
     }, 
     { 
      'name': 'Wielen en banden', 
      'good': ['Staat van de banden', 'Reservewiel'], 
      'trace_of_use': ['Krik'], 
      'to_repair': [], 
     }, 
     { 
      'name': 'Verlichtimi: en signalisatie', 
      'good': ['Kruislichten', 'Grootlichten', 'Mistlichten vooraan', 'Suoolementaire verlichting', 
        'Standlichten', 'Richtingaanwiizers', 'Alarrn(signaal)', 'Stoolichten', 'Nummerplaatverlichting'], 
      'trace_of_use': ['Krik'], 
      'to_repair': ['Mistachterlicht', 'Achteruitri ilicht', 'Enkeltonige claxon', 
          'instrurnentenbord : verlichting en lampjes'], 
     }, 
     { 
      'name': 'Uitrustinegen', 
      'good': ['Zetels', 'Gordels', 'Stuurwiel', 'Brandblusser', 'Verbanddoos', 'Airconditioning', 
        'Audio installatie (ootioneel)', 'Elektrische ruiten', 'Centrale vergrendeling'], 
      'trace_of_use': ['Ruitenwisser en ruitensproeier vooraan', 'Binnen- en buitenspiegels', 
          'Alarmsvsteem (optioneel)'], 
      'to_repair': ['Ooendak', 'Reservewielhouder + druk van het reservewiel', 
          'Aanhangwagenkopoeling (ootioneel', 'Gevarendriehoek'], 
     }, 
     { 
      'name': 'Beglazing - carrosserie', 
      'good': ['Voorruit en beglazing', 'Deuren en kofferdeksel', 'Motorkao', 'Soatborden', 
        'Bumpers -afdekplaten', 'Reflectoren achterlichten', 'Laadbak -cabine (bedrijfsvoertuig'], 
      'trace_of_use': [], 
      'to_repair': [], 
     }, 
     { 
      'name': 'Remmen - stuurinrichting', 
      'good': ['Bedriifsrem', 'Handrem', 'Remvloeistofreservoir', 'Hoofdremcilinder', 'Rembekrachtiging', 
        'Sturbekrachtiging', 'Staal van rem- en stuurleidingen', 'Vloeistofreservoir stuurbekrachtiging', 
        'Remblokken', 'Remschijven', 'Remzadels', 'Remkrachtverdelers', 'Handremkabel', 'Stuurhuis', 
        'Reactiestangen stuurinrichting'], 
      'trace_of_use': [], 
      'to_repair': [], 
     }, 
     { 
      'name': 'Verbindingen met het wegdek - assen', 
      'good': ['Voortrein', 'Achtertrein', 'Veren', 'Staal schokdempers', 'Wielnaven', 'Wiellagerhuis', 
        'Wiellagers', 'Driehoeksophanging', 'Reactiestangen', 'Silentblocs', 'Kogelgewrichten', 
        'Stabilisatiestang(en)', 'Silentblocs motor en versnellingsbak'], 
      'trace_of_use': [], 
      'to_repair': [], 
     }, 
     { 
      'name': 'Bouw - carrosserie', 
      'good': ['Langsliggers - dwarsliggers', 'Bodem', 'Hulpchassis', 'Wieldoorgangen', 'Stijlen', 'Kale carrosserie', 'Chassis', 'Onderziide'], 
      'trace_of_use': ['Kogelgewrichten stuurinrichting'], 
      'to_repair': [], 
     }, 
     { 
      'name': 'Verontreiniging;', 
      'good': ['Uitlaatgassentest'], 
      'trace_of_use': [], 
      'to_repair': [], 
     } 
    ] 

在我的模板我试图遍历该列表如下：

{% for description in car.description %} 
    <div class="wrapper width-50 {% cycle 'pad-rgh pull-left' 'pad-lft pull-right' %}"> 
     <div class="title-description text-center clear-float"> 
      <div class="width-10 pad-half secondary-bg">{{ forloop.counter }}</div> 
      <div class="width-55 text-left pad-half primary-bg">{{ description.name }}</div> 
      <div class="width-10 pad-half secondary-bg">1</div> 
      <div class="width-10 pad-half secondary-bg bord-hor">2</div> 
      <div class="width-10 pad-half secondary-bg">3</div> 
     </div> 

     {% for good in description.good %} 
      <div class="content"> 
       <div class="item-description clear-float"> 
        <div class="width-55 pad-half" style="margin-left: 10%">{{ good }}</div> 
        <div class="width-10 pad-half text-center">1</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
       </div> 
      </div> 
     {% endfor %} 

     {% for trace_of_use in description.trace_of_use %} 
      <div class="content"> 
       <div class="item-description clear-float"> 
        <div class="width-55 pad-half" style="margin-left: 10%">{{ trace_of_use }}</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
        <div class="width-10 pad-half text-center">1</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
       </div> 
      </div> 
     {% endfor %} 

     {% for to_repair in description.to_repair %} 
      <div class="content"> 
       <div class="item-description clear-float"> 
        <div class="width-55 pad-half" style="margin-left: 10%">{{ to_repair }}</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
        <div class="width-10 pad-half text-center">&nbsp;</div> 
        <div class="width-10 pad-half text-center">1</div> 
       </div> 
      </div> 
     {% endfor %} 
    </div> 
    {% if forloop.counter|divisibleby:2 %} <div class="clear-float"></div> {% endif %} 
{% endfor %} 

的结果我得到的是如下：

我想表明它没有div之间的空白区域。因此，像这样的：

任何意见，如何做到这一点？

Answer 1

你可以使用下面的代码作为参考，唯一的事情就是这个组织div从上到下而不是从左到右像你在屏幕截图中展示的一样。

如果这对您很重要，砌体可能是您的最佳解决方案。否则，下面的代码应该这样做：

砌体链接：http://masonry.desandro.com/

*, *:before, *:after {box-sizing: border-box !important;} 
 

 

 
.row { 
 
-moz-column-width: 12em; 
 
-webkit-column-width: 12em; 
 
-moz-column-gap: 1em; 
 
-webkit-column-gap:1em; 
 
padding: 1em; 
 
padding-bottom: 0px; 
 
} 
 

 
.item { 
 
display: inline-block; 
 
padding-bottom: 1em; 
 
width: 100%; 
 
} 
 

 
.type { 
 
background: #ccc; 
 
margin: 5px; 
 
padding: 10px; 
 
position:relative; 
 
display: block; 
 
}

<div class="row"> 
 
    <div class="item"> 
 
\t \t \t \t 
 
     <div class="type"> 
 
     <h4>1</h4> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor felis, venenatis sit amet justo eu, accumsan commodo nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
\t </div> 
 
    </div> <!-- item --> 
 
    
 
    <div class="item"> 
 
\t \t \t \t 
 
     <div class="type"> 
 
     <h4>2</h4> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor felis, venenatis sit amet justo eu. 
 
     </div> 
 
\t \t \t \t \t 
 
    </div> <!-- item --> 
 
    <div class="item"> 
 
\t \t \t \t 
 
     <div class="type"> 
 
     <h4>3</h4> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </div> 
 
\t \t \t \t \t 
 
    </div> <!-- item --> 
 
    <div class="item"> 
 
\t \t \t \t 
 
     <div class="type"> 
 
     <h4>4</h4> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor felis, venenatis sit amet justo eu, accumsan commodo nisl. 
 
     </div> 
 
\t \t \t \t \t 
 
    </div> <!-- item --> 
 
    <div class="item"> 
 
\t \t \t \t 
 
     <div class="type"> 
 
     <h4>5</h4> 
 
     Lorem ipsum dolor sit amet. 
 
     </div> 
 
\t \t \t \t \t 
 
    </div> <!-- item --> 
 
    
 
    </div>