html - CSS div定位: ridiculous number for margin-left

Question

http://jsfiddle.net/SVJaK/1338/

在这个 fiddle 中，我厌倦了在绿色 div 和我右边的 div 之间留出一小段空间。我不得不将非常大的 px 数放在 margin-left 上以形成那个小间隙。你能告诉我为什么吗？差距大约是 50px 之类的，我必须将 620 的值放在 margin-left 上以形成差距。我嵌套div有什么问题吗？ 我希望 .right div 是绿色 div 的右边。这是我的代码:

<div class="nobr">

<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div style="clear:both"></div> 

<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div>
<div style="clear:both"></div> 

<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
<div class="className" style="background-color:green; height:100px;" id="IDName" ><a href="#" style="font-weight: bolder;"> Your Text goes here </a></div> 
</div>

<div class="right">this is my right div</div>

我的 CSS 是这样的:

a{display:table-cell; height:100%;vertical-align:middle; text-align:center; }
a:hover { background-color:#000;}
div.className {display:table;  width:200px; float:left;}
div.nobr {width:600px; }
div.right {margin-left:620px;}

Answer 1

像下面这样更新你的 CSS。

a{display:table-cell; height:100%;vertical-align:middle; text-align:center; }
a:hover { background-color:#000;}
div.className {display:table;  width:200px; float:left;}
div.nobr {width:600px; float:left;}
div.right { float:left; padding-left:30px;}

DEMO