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">
				
      <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.
	  </div>
    </div> <!-- item -->
    
    <div class="item">
				
      <div class="type">
        <h4>2</h4>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor felis, venenatis sit amet justo eu.
      </div>
					
    </div> <!-- item -->
    <div class="item">
				
      <div class="type">
        <h4>3</h4>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
					
    </div> <!-- item -->
    <div class="item">
				
      <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>
					
    </div> <!-- item -->
    <div class="item">
				
      <div class="type">
        <h4>5</h4>
        Lorem ipsum dolor sit amet.
      </div>
					
    </div> <!-- item -->
    
  </div>

用浮点放置div

1 个答案: