Question

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

在这个小提琴中，我厌倦了在绿色div和我的右边div之间缩短空间。我不得不将大量的px放在margin-left上以产生这个小差距。你能告诉我为什么吗？差距就像是50px或者其他东西，我不得不将620的值放在保证金左边以弥补差距。我的divs嵌套有什么问题吗？我希望.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

Answer 2

你没有离开右边的div，这里是http://jsfiddle.net/SVJaK/1341/

div.right{float: left;}

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

2 个答案: