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 */

Answer 2

尝试：

.wrapper div {
   float: left;
}

Answer 3

如果您正在使用div行，那么每行div应该有一个包装器，如果您需要更改设计，它会有很多帮助

Answer 4

.wrapper
 {
vertical-align:middle ;
float:left; 
}

Answer 5

我知道，这不是答案，我需要发布图片。

以下是我从这台电脑上看到的内容。

enter image description here

也许您可以提供更多有关您情况的信息，例如特定浏览器定位，完整HTML 代码（查看doctype， BOM标记，字符编码等）

水平div不符合

5 个答案: