Platzierung divs mit Schwimmer

Question

ich eine große Liste der Wörterbücher in django haben sehen wie folgt aus:

'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': [], 
     } 
    ] 

In meiner Vorlage durch diese Liste Schleife Ich versuche wie folgt:

{% 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 %} 

dem Ergebnis, dass ich ist wie folgt:

ich es ohne die zeigen wollen Leerzeichen zwischen divs. So wie folgt aus:

Ratschläge, wie das zu tun?

Answer 1

Sie können den Code unten als Referenz verwenden, die einzige Sache ist, dass dies die Divs von oben nach unten organisiert und nicht von links nach rechts, wie Sie es in Ihrem Screenshot gezeigt haben.

Wenn dies für Sie wichtig ist, kann Mauerwerk die beste Lösung für Sie sein. Andernfalls Sie der Code unten sollte es tun:

Mauer Link: 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>