CSS div定位:左边空白的荒谬数字

Question

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

在这把小提琴里，我很想在绿色的div和我的右侧div之间留出一个很短的空间。我不得不在左边的空白处放一个很大的px来留出这个小间隙。你能告诉我为什么吗？这个差距大约是50像素左右，我必须把620的值放在左边的空白处才能形成这个差距。我的div嵌套有什么问题吗？我想要右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

Answer 2

您没有向左浮动右侧div，此处http://jsfiddle.net/SVJaK/1341/

div.right{float: left;}