html - Div 显示在错误的位置

Question

我有这样的代码:

<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&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Sound &amp; Vision</a><span class="cnt"> (9943)</span></li><ul class="lev2"><li><a href="/Digi-Spot/TV-Home-Audio-Accessories-/_i.html?_sacat=14961&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">TV &amp; Home Audio Accessories</a><span class="cnt"> (4056)</span></li><li><a href="/Digi-Spot/Performance-DJ-Equipment-/_i.html?_sacat=48458&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Performance &amp; DJ Equipment</a><span class="cnt"> (1893)</span></li><li><a href="/Digi-Spot/Multipurpose-Batteries-Power-/_i.html?_sacat=48446&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Multipurpose Batteries &amp; Power</a><span class="cnt"> (1571)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Sound-Vision-/_i.html?_sacat=293&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Business, Office &amp; Industrial</a><span class="cnt"> (2530)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Building-Materials-Supplies-/_i.html?_sacat=41498&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Building Materials &amp; Supplies</a><span class="cnt"> (2168)</span></li><li><a href="/Digi-Spot/Electrical-Test-Equipment-/_i.html?_sacat=92074&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Electrical &amp; Test Equipment</a><span class="cnt"> (107)</span></li><li><a href="/Digi-Spot/Industrial-Tools-/_i.html?_sacat=64808&amp;_sid=560455030&amp;_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&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Computers/Tabl&#8203;ets &amp; Networking</a><span class="cnt"> (1655)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Cables-Connectors-/_i.html?_sacat=31491&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Cables &amp; Connectors</a><span class="cnt"> (1328)</span></li><li><a href="/Digi-Spot/Laptop-Desktop-Accessories-/_i.html?_sacat=31530&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Laptop &amp; Desktop Accessories</a><span class="cnt"> (262)</span></li><li><a href="/Digi-Spot/Other-Computing-Networking-/_i.html?_sacat=162&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Other Computing &amp; Networking</a><span class="cnt"> (33)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li></ul><div class="link"><br><a href="/Digi-Spot/_i.html?_sasi=1&amp;_sid=560455030&amp;_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>

它的结果是这样的:

可能是什么问题？我希望以红色 div 标记的位于底部的中央。

Answer 1

将 margin: 0 auto 添加到那个 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>