这个问题是因为你在第二个div上应用了float:left，这使得第二个div在左边，第一个div落在第二个div之后。 如果你在第一个div上也使用float:left，你的问题就会消失。

溢出:隐藏不会对你的布局造成任何问题，溢出:隐藏只影响一个div的内部元素，它与外部的其他元素无关。

CSS中垂直对齐的默认值是baseline &此规则也适用于内联块读取此http://www.brunildo.org/test/inline-block.html

在你的内联块DIV中写入vertical-align:top。

检查这个http://jsfiddle.net/WGCyu/1/

基本上，你已经在你的代码中添加了更多的混乱，这造成了更多的混乱，所以首先我试着删除阻碍理解真正问题的混乱。

首先我们要确定真正的问题是什么? 这就是为什么“inline-block”元素被向下推。

现在我们开始理解它，并首先清除混乱。

1 - 为什么不给所有三个div相同的边界宽度? 让我们给它。

2 -浮动元素是否与向下推的内联块元素有任何联系? 不，跟这没关系。

因此，我们已经完全删除了这个div。你看到了内联块元素向下推的相同行为。

现在轮到一些文献来掌握行盒的思想，以及它们如何在同一行中排列(特别是仔细阅读最后一段，因为这是你问题的答案)。

'inline-block'的基线是它在正常流中的最后一个行框的基线，除非它没有流中的行框，或者它的'overflow'属性有一个计算值而不是'visible'，在这种情况下基线是底边距。

如果你不确定基线，那么这里是简单的解释。

除了“gjpqy”之外的所有字符都写在基线上，你可以把基线想象成如果你画一条简单的水平线，就像在这些“随机字符”下面画下划线一样，那么它将是基线，但现在如果你在同一条线上写任何“gjpqy”字符，那么这些字符的较低部分将落在线以下。

因此，我们可以说，除了'gjpqy'之外的所有字符都完全写在基线之上，而这些字符的一部分写在基线之下。

3 -为什么不检查我们的底线在哪里? 我增加了几个字符，显示我们的底线。

4 -为什么不添加一些字符在我们的div也找到他们的基线在div? 这里，在div中添加了一些字符以澄清基线。

现在，当你理解了基线，阅读以下关于内联块基线的简化版本。

i)如果inline-block的overflow属性被设置为可见(这是默认的，所以不需要设置)。 那么它的基线将是该行包含块的基线。

ii)如果inline-block的overflow属性设置为OTHER THAN visible。 那么它的底边距将在包含框的线的基线上。

第一点

现在再看一遍，阐明绿色div的概念。 如果还有任何混淆，则在这里添加更多靠近绿色div的字符，以建立包含块的基线，并对齐绿色div基线。

我现在说他们有相同的基线?对吧?

5 -那么为什么不把它们重叠起来，看看它们是否适合彼此? 因此，我引入第三个div -left: 35px;检查他们现在是否有相同的基线?

现在，我们已经证明了第一点。

第二点细节

好了，在解释了第一点之后，第二点就很容易理解了，你会看到第一个div的溢出属性设置为除了可见(隐藏)之外，它的底边距在一行的基线上。

现在，你可以做几个实验来进一步说明。

设置第一个div overflow:visible(或完全删除它)。 设置第二个div溢出:除可见之外。 设置两个div溢出:除了可见。

现在把你那些乱七八糟的东西拿回来，看看你是否觉得一切都好。

返回浮动的div(当然需要这样做 增加身体的宽度) 你看，它没有效果。 带回相同的奇数边距。 将绿色div设置为溢出:在你的问题中可见(这种不对齐是由于边界宽度从1px增加到5px，所以如果调整为负向左，你会发现没有问题) 现在删除我添加的额外字符 的理解。(当然，去掉左边的负) 最后减少身体宽度，因为我们不再需要更宽的身体。

现在我们又回到了起点。

希望我已经回答了你的问题。

尝试添加填充:0;对身体和删除边缘的divs。

添加background-color:*除background*以外的任何颜色来检查差异。

尝试使所有元素的所有CSS属性相同。

我有类似的问题，在修复这个问题时，我发现我正在删除一个具有字体属性的元素到Div元素。

在删除带有字体属性的元素后，所有DIV的对齐都被打乱了。为了解决这个问题，我将字体属性设置为所有DIV元素，与放入其中的元素相同。

在下面的例子中，类的Dropped元素”。dldCuboidButton"用font-size:30 px定义。

因此，我将相同的属性添加到其余的类，即. cuboidrecycle， . licollect， . dldcollect，这些都是由DIV元素使用的。通过这种方式，所有DIV元素在放入元素之前和之后遵循相同的测量。

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

下面是使用上述CSS动态创建的HTML示例。

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);

只需使用vertical-align:top;

Demo