Div显示错误的位置 [英] Div is shown in wrong position
本文介绍了Div显示错误的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的代码：
< div style =position：relative>
< div style =float：left; width：183px; background-color：＃c1cba9; color：＃000000;>< img border =0alt =产品类别title =产品类别src =http://www.gvcdigital.co.uk/images/graphic/categrieshead.pngwidth =179height =43>< br />
< div style =margin-left：10;>< ul>< li>< a href =/ Digi-Spot / Sound-Vision - / _ i.html？_sacat = 293& amp ; amp; _sid = 560455030& amp; _trksid = p4634.c0.m322>>声音& Vision< / a>< span class =cnt> （9943）< / span>< / li>< ul class =lev2>< li>< a href =/ Digi-Spot / TV-Home-Audio-Accessories - / _ i.html ？_sacat = 14961& _sid = 560455030& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;家庭音响配件< / a>< span class =cnt> （4056）< /跨度>< /立GT;<李>< A HREF =/向Digi-现货/性能-DJ-设备 - / _ i.html _sacat = 48458&放大器;放大器; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322> Performance& amp; amp; amp; amp; DJ设备< / a>< span class =cnt> （1893）< /跨度>< /立GT;<李>< A HREF =/向Digi-现货/多用途-电池功率 - / _ i.html _sacat = 48446&安培;安培; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322>多功能电池& amp; amp;电源< / a>< span class =cnt> （1571）< / h>< / li>< / ul>< li class =morelnk>< a href =/ Digi-Spot / Sound-Vision - / _ i.html？_sacat = 293放大器;放大器; _sasi = 1&放大器;放大器; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322 >更...< / A>< /立GT;<李>< A HREF = /Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&_sid=560455030&_trksid=p4634.c0.m322\">商业，办公室&工业< / a>< span class =cnt> （2530）< / span>< / li>< ul class =lev2>< li>< a href =/ Digi-Spot / Building-Materials-Supplies - / _ i.html？_sacat = 41498& _sid = 560455030& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;用品< / a>< span class =cnt> （2168）< / span>< / li>< li>< a href =/ Digi-Spot / Electrical-Test-Equipment - / _ i.html？_sacat = 92074& _sid = 560455030& amp ; _trksid = p4634.c0.m322> Electrical& amp; amp; amp;测试设备< / a>< span class =cnt> （107）< /跨度>< /立GT;<李>< A HREF =/向Digi-现货/工业-工具 - / _ i.html _sacat = 64808&安培;安培; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322>工业工具< / a>< span class =cnt> （92）< / h2>< / li>< / ul>< li class =morelnk>< a href =/ Digi-Spot / Business-Office-Industrial - / _ i.html？ _sacat = 12576&放大器;放大器; _sasi = 1&放大器;放大器; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322\" >更...< / A>< /立GT;<李>< A HREF = /向Digi-现货/计算机片剂-网络 - / _ i.html _sacat = 58058&安培;安培; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322 >计算机/ TABL&安培;＃8203; ETS&安培;放大器;网路< / a>< span class =cnt> （1655）< / span>< / li>< ul class =lev2>< li>< a href =/ Digi-Spot / Cables-Connectors - / _ i.html？_sacat = 31491& amp ; amp; _sid = 560455030& amp; amp; _trksid = p4634.c0.m322>>电缆&连接器< / a>< span class =cnt> （1328）< / span>< / li>< li>< a href =/ Digi-Spot / Laptop-Desktop-Accessories - / _ i.html？_sacat = 31530& _sid = 560455030& amp ; _trksid = p4634.c0.m322>笔记本电脑&桌面配件< / a>< span class =cnt> （262）< / span>< / li>< li>< a href =/ Digi-Spot / Other-Computing-Networking - / _ i.html？_sacat = 162& _sid = 560455030& amp ; _trksid = p4634.c0.m322>其他计算& amp; amp;网路< / a>< span class =cnt> （33）< / span>< / li>< / ul>< li class =morelnk>< a href =/ Digi-Spot / Computers-Tablets-Networking - / _ i.html？ _sacat = 58058&放大器;放大器; _sasi = 1&放大器;放大器; _sid = 560455030&放大器;放大器; _trksid = p4634.c0.m322\" >更...< / A>< /立GT;< / UL>< DIV class =link>< br>< a href =/ Digi-Spot / _i.html？_sasi = 1& amp; amp; amp; _sid = 560455030& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;商店中的商品< / a>< / div>< / div>< br />
< img border =0src =http://www.gvcdigital.co.uk/images/graphic/catbot.pngwidth =179height =17>< / DIV>
< div style =float：left; width：480px; height：100px; text-align：center; background-color：＃d6d6a4;>< img border =0src =http ：//www.gvcdigital.co.uk/images/graphic/description.pngwidth =232height =81>< br />>< div style =text-align：left; margin -left：10;> [[Description]]< / div>< / div>
< div style =float：left; width：324px; height：100px; text-align：center;>
< div style =width：324px; color：#ffffff; background-color：＃6b8861; background-color：＃d6d6a4; font-size：34px;> [[Title]]< DIV>
< div style =width：324px; color：＃801010; font-size：40px; background-color：＃d6d6a4;>价格：[[BuyItNowPrice]]< / div>
< / div>
< / div>
< div style =clear：both; text-aling：center; width：985px;>< img border =0src =graphic / buttom.pngwidth = 524height =42>< / div>
结果如下：
可能是什么问题？我希望标记为红色的div位于底部的中心。
解决方案
添加 margin：0
< div style =clear：both; text-align： center; width：985px; margin：0 auto;>< img border =0src =graphic / buttom.pngwidth =524height =42>< / div>
I have such code:
<div style="position:relative">
<div style="float:left; width: 183px; background-color:#c1cba9; color: #000000;"><img border="0" alt="Product categories" title="Product categories" src="http://www.gvcdigital.co.uk/images/graphic/categrieshead.png" width="179" height="43"><br />
<div style="margin-left: 10;"><ul><li><a href="/Digi-Spot/Sound-Vision-/_i.html?_sacat=293&_sid=560455030&_trksid=p4634.c0.m322">Sound & Vision</a><span class="cnt"> (9943)</span></li><ul class="lev2"><li><a href="/Digi-Spot/TV-Home-Audio-Accessories-/_i.html?_sacat=14961&_sid=560455030&_trksid=p4634.c0.m322">TV & Home Audio Accessories</a><span class="cnt"> (4056)</span></li><li><a href="/Digi-Spot/Performance-DJ-Equipment-/_i.html?_sacat=48458&_sid=560455030&_trksid=p4634.c0.m322">Performance & DJ Equipment</a><span class="cnt"> (1893)</span></li><li><a href="/Digi-Spot/Multipurpose-Batteries-Power-/_i.html?_sacat=48446&_sid=560455030&_trksid=p4634.c0.m322">Multipurpose Batteries & Power</a><span class="cnt"> (1571)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Sound-Vision-/_i.html?_sacat=293&_sasi=1&_sid=560455030&_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&_sid=560455030&_trksid=p4634.c0.m322">Business, Office & Industrial</a><span class="cnt"> (2530)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Building-Materials-Supplies-/_i.html?_sacat=41498&_sid=560455030&_trksid=p4634.c0.m322">Building Materials & Supplies</a><span class="cnt"> (2168)</span></li><li><a href="/Digi-Spot/Electrical-Test-Equipment-/_i.html?_sacat=92074&_sid=560455030&_trksid=p4634.c0.m322">Electrical & Test Equipment</a><span class="cnt"> (107)</span></li><li><a href="/Digi-Spot/Industrial-Tools-/_i.html?_sacat=64808&_sid=560455030&_trksid=p4634.c0.m322">Industrial Tools</a><span class="cnt"> (92)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&_sasi=1&_sid=560455030&_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&_sid=560455030&_trksid=p4634.c0.m322">Computers/Tabl​ets & Networking</a><span class="cnt"> (1655)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Cables-Connectors-/_i.html?_sacat=31491&_sid=560455030&_trksid=p4634.c0.m322">Cables & Connectors</a><span class="cnt"> (1328)</span></li><li><a href="/Digi-Spot/Laptop-Desktop-Accessories-/_i.html?_sacat=31530&_sid=560455030&_trksid=p4634.c0.m322">Laptop & Desktop Accessories</a><span class="cnt"> (262)</span></li><li><a href="/Digi-Spot/Other-Computing-Networking-/_i.html?_sacat=162&_sid=560455030&_trksid=p4634.c0.m322">Other Computing & Networking</a><span class="cnt"> (33)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&_sasi=1&_sid=560455030&_trksid=p4634.c0.m322">more...</a></li></ul><div class="link"><br><a href="/Digi-Spot/_i.html?_sasi=1&_sid=560455030&_trksid=p4634.c0.m322">See all items in the store</a></div></div><br />
<img border="0" src="http://www.gvcdigital.co.uk/images/graphic/catbot.png" width="179" height="17"></div>
<div style="float:left; width: 480px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="http://www.gvcdigital.co.uk/images/graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">[[Description]]</div></div>
<div style="float:left; width: 324px; height:100px; text-align: center; ">
<div style="width: 324px; color: #ffffff; background-color:#6b8861; background-color:#d6d6a4;font-size : 34px;">[[Title]]</div>
<div style="width: 324px; color: #ffffff; background-color:#6b8861;"><div style="width: 320px; margin: 2 2 2 2; background-color:#ffffff;">[[Picture1]]</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
<div style="width: 324px; color: #801010; font-size : 40px; background-color:#d6d6a4;">Price: [[BuyItNowPrice]]</div>
</div>
</div>
<div style="clear: both; text-aling: center; width:985px;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>
And result of it looks like this:
What could be the problem? I want that marked in red div to be in center of the bottom.
解决方案
Add margin: 0 auto to that div:
<div style="clear: both; text-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>
这篇关于Div显示错误的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
