0

我在 Jquery 和jsFiddle中创建了几行 div

生成的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 ;
    }

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

屏幕抓取

4

5 回答 5

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 */
于 2013-03-11T21:11:27.403 回答
0

尝试：

.wrapper div {
   float: left;
}
于 2013-03-11T21:06:52.333 回答
0

如果您正在使用 div 行，则应该为每行 div 提供一个包装器，如果您需要更改设计，这将有很大帮助

于 2013-03-11T21:08:26.450 回答
0 
.wrapper
 {
vertical-align:middle ;
float:left; 
}
于 2013-03-11T21:21:44.223 回答
0

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

这是我从这台电脑上看到的。

在此处输入图像描述

也许您可以提供有关您的情况的更多信息，例如针对特定浏览器、完整的 html代码（查看文档类型、BOM 标记、字符编码等）

于 2013-03-11T21:50:20.943 回答