html - 放置带有 float 的div

Question

我在 django View 中有一大堆字典，如下所示:

'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>