CSS div定位：margin-left的荒谬数字答案

【问题标题】：CSS div positioning: ridiculous number for margin-leftCSS div定位：margin-left的荒谬数字
【发布时间】：2014-09-18 21:51:10
【问题描述】：

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

在这个小提琴中，我厌倦了在绿色 div 和我的右侧 div 之间留出一小段空间。我不得不在左边距上放大量的像素来制造那个小间隙。你能告诉我为什么吗？间隙就像 50 像素之类的东西，我必须将 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;}

【问题讨论】：

这似乎不是正确的小提琴。
很抱歉。我编辑了正确的小提琴。
我认为您未能关闭您的div.nobr div。尝试在 div.right 元素之前添加一个结束标签。 this 是你的意思吗？
我为我的 .nobr 编辑了结束标签。右 div 没有变化。
你能澄清一下你想要的行为吗？当我添加结束标签（见上面的小提琴）时，我看到.right 位于.nobr 的右侧，因此它的位置没有任何大的余量。

标签： html css position margin

【解决方案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

【讨论】：

【解决方案2】：

你没有左浮动右div，这里http://jsfiddle.net/SVJaK/1341/

div.right{float: left;}

【讨论】：

不，这不是我想要的，右 div 现在位于绿色 div 下方。我想要绿色 div 的权利。
如果你调整窗口的大小足够它会靠近绿色，它就不能以高边距靠近绿色