jquery - 水平div不在一条线上

Question

我在 Jquery 中创建了多行 div，jsFiddle

生成的html是

<div id="thisPage">
  <div id="vehicles" class="wrapper">
    <div class="divd spacer">&nbsp;</div> 
    <div id="Paul " title="Driver Details" class="divd i100">i1001<br>Paul </div>
    <div id="Simon " title="Driver Details" class="divd i100">i1002<br>Simon </div>
    <div id="Phil " title="Driver Details" class="divd i100">i1003<br>Phil </div>
    <div id="Lee " title="Driver Details" class="divd i100">i1004<br>Lee </div>
    <div id="Martin" title="Driver Details" class="divd i100">i1005<br>Martin </div>
    <div id="" title="Driver Details" class="divd i100">i1006<br></div>
    <div id="Tom Robson" title="Driver Details" class="divd i60">i601<br>Tom Robson</div>
    <div id="Alan Linney " title="Driver Details" class="divd i60">i602<br>Alan Linney </div>
  </div>

  <div id="vehicles" class="wrapper" style="top:60px">
    <div id="2013-03-11" class="divd dateWeekday">Monday 11<br>March</div>
    <div id="Paul " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Simon " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Phil " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Lee " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Martin " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="" title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Tom " title="Driver Details" class="divd i60"> JOB D </div>
  </div>
</div>

样式是

.wrapper {
    position:absolute; vertical-align:middle ; 
}
.divd { 
    display: inline-block;
    margin:2px 2px 2px 2px ;
    width: 50px;
    height: 50px;   
    border: 1px solid black;
    background-color:#999; 
    border-radius:5px;  
    z-index:200;
    text-align:center;
    vertical-align:bottom ;
}
.dateWeekday {
        width: 120px;
        background-color:#9CF ;
        margin:2px 2px 2px 2px ;
    }
.spacer {
        width: 120px;
        margin:2px 2px 2px 2px ;
    }    

一切正常，但浏览器中的结果显示第二行偏移到第一行，如下图中的红线所示，我该如何更正这个问题？有什么帮助吗？

Screen grab

Answer 1

试试这个:

.wrapper {
    position:absolute; vertical-align:middle ; 
}
.divd { 
background-color: #999999;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    float: left;
    height: 50px;
    margin: 0 1px 0 0;
    text-align: center;
    vertical-align: bottom;
    width: 50px;
    z-index: 200;
}
.dateWeekday {
        width: 120px;
        background-color:#9CF ;
    }
.spacer {
        width: 120px;
    }   

所以现在你在每个 divd 上都有一个 1px 右边的边距;​​

margin-right:1px; /* is the same as margin:0 1px 0 0; */

边距是这样工作的:

margin:topPX rightPX bottomtPX leftPX; /* if four */

或:

    margin:top&bottomPX right&leftPX; /*if only two */

边距:2px 2px 2px 2px ;与以下内容相同:

 margin:2px; /* if just one its the same top+right+bottom+left */