Html CSS div定位：左边距的荒谬数字

在这把小提琴中，我努力在绿色的div和我的右div之间留出一个很短的空间。我不得不在左边空白处放置大量的px来形成那个小间隙。你能告诉我为什么吗？差距就像是50px或者什么的，我必须在左边的边距上加上一个值620来形成这个差距。我的沙发套有什么问题吗？ 我想，正确的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; float:left;}
div.right { float:left; padding-left:30px;}

---

您没有从右div向左浮动，在这里

---

那似乎不是正确的小提琴。很抱歉。我编辑了正确的小提琴。我认为您未能关闭

div.nobr

div。请尝试在

div.right

元素之前添加一个结束标记。你是什么意思？我为我的.nobr编辑了结束标记。右分区没有变化。那么你能澄清一下你想要的行为吗？当我添加结束标记（参见上面的fiddle）时，我看到

.right

位于

.nobr

的右侧，并且它的位置没有任何大的边距。不，这不是我想要的，右div现在位于绿色div的下方。我希望它位于绿色divs的右边。它不能在绿色旁边有这么高的边距，如果你调整窗口的大小足够大，它就会在绿色旁边

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;}

div.right{float: left;}