Html 放置div'；有浮子吗
在django视图中，我有一个大词典列表，如下所示：Html 放置div'；有浮子吗,html,django,css,django-templates,Html,Django,Css,Django Templates,在django视图中，我有一个大词典列表，如下所示： 'description': [ { 'name': 'Onderdelen', 'good': ['Motor', 'Versnellingsbak', 'Koppeling', 'Carburatie - injectie - Diesel injectie + verstuivers'], 'trace_of_use': ['Differentiee
'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"> </div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center">1</div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center"> </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 %}
'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"> </div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center">1</div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center"> </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 %}
{%用于car.description%}
{{forloop.counter}}
{{description.name}}
1.
2.
3.
{%表示描述良好。良好%}
{{好}}
1.
{%endfor%}
{description中使用的跟踪\u的百分比。使用的跟踪\u%}
{{trace_of_use}}
1.
{%endfor%}
{description.to_repair%}
{{to_repair}}
1.
{%endfor%}
{%if-forloop.counter |可除数by:2%}{%endif%}
{%endfor%}
'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"> </div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center">1</div>
<div class="width-10 pad-half text-center"> </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"> </div>
<div class="width-10 pad-half text-center"> </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，而不是像您在屏幕截图中显示的那样从左到右组织div 如果这对你很重要，砖石可能是最好的解决方案。否则，下面的代码将执行此操作： 砌体连接：
*，*：之前，*：之后{框大小：边框框！重要；}
.行{
-moz列宽：12em；
-webkit列宽：12em；
-莫兹柱间距：1米；
-webkit柱间距：1米；
填充：1em；
垫底：0px；
}
.项目{
显示：内联块；
垫底：1米；
宽度：100%；
}
.类型{
背景：#ccc；
保证金：5px；
填充：10px；
位置：相对位置；
显示：块；
}
1.
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，这是一只猫，威尼斯人坐在埃米特·胡斯托·尤里的椅子上。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。
2.
Lorem ipsum dolor sit amet，是一位杰出的献身者。多内克·托托·费利斯，威尼斯人坐在埃米特·胡斯托·尤里。
3.
Lorem ipsum dolor sit amet，是一位杰出的献身者。
4.
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，这是一只猫，威尼斯人坐在埃米特·胡斯托·尤里的椅子上。
5.
Lorem ipsum dolor sit amet。