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

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

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

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

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

查看这个替代示例。这种行为的原因在CSS3模块:line: 3.2中描述。线盒包装[1]:

一般情况下，行盒的开始边与包含它的块的开始边相接触，结束边与包含它的块的结束边相接触。但是，浮动框可能位于包含块边缘和行框边缘之间。因此，尽管在同一行内格式化上下文中的行框通常具有相同的行内进度推进(包含块的行内进度推进)，但如果可用的行内进度空间由于浮动而减少，它们可能会有所不同[…]

如您所见，第三个元素被向下推，尽管它没有overflow属性。原因一定在别的地方。你注意到的第二个行为描述在级联样式表Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，在浮动旁边创建的当前和后续行框将根据需要缩短，以便为浮动的边距框腾出空间。

所有你的显示:inline-block;线高计算:' Line -height'和'vertical-align'属性(very end) [3]:

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

So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.

最后，溢出:隐藏的原因将防止#firstDiv被推到#container的下边缘，尽管我在第11节中找不到原因。没有溢出:隐藏它的工作方式与2和3所定义的不同。演示

TL;DR:仔细研究一下W3推荐和浏览器中的实现。在我看来，如果你不知道浮动元素对周围元素的所有改变，它们就会显示出意想不到的行为。这是另一个演示，展示了一个常见的问题与浮动。

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

首先我们要确定真正的问题是什么? 这就是为什么“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，所以如果调整为负向左，你会发现没有问题) 现在删除我添加的额外字符 的理解。(当然，去掉左边的负) 最后减少身体宽度，因为我们不再需要更宽的身体。

现在我们又回到了起点。

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

只需使用vertical-align:top;

Demo

尝试添加填充: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>" 
);

我最初开始回答这个问题，但在我完成之前它被锁定为欺骗，所以我把答案贴在这里。

首先，我们需要理解什么是内联块。 MDN中的定义是这样的:

元素生成一个块元素框，将与之一起流动 围绕内容，就好像它是一个内联框(行为 就像替换的元素一样)

为了理解这里发生了什么，我们需要看看vertical-align，它的默认值baseline。

在这个插图中，你有这个颜色表: 蓝色:基线 红色:行高的顶部和底部 绿色:内嵌内容框的顶部和底部。

在#left元素中，确实有一些文本内容控制基线是什么。这意味着里面的文本定义了#left的基线。 在#右侧，没有内容，所以浏览器只能使用框底部作为基线。

Se这个可视化的地方，我已经在一个例子中绘制了基线，其中第一个内联容器有一些文本，下一个是空的:

如果你特别地将一个元素对齐到顶部，你实际上是在将这个元素的顶部对齐到行框的顶部。

举个例子可能更容易理解。

div { 显示:inline-block; 宽度:100 px; 身高:150 px; 背景:灰色; vertical-align:基线; ｝ div #{中间 vertical-align:最高; 高度:50 px ｝ 正确div # { 字体大小:30 px; 身高:100像素 ｝ < div id = "左" > groovy < span > < / span > < / div > groovy < div id = "中间" > < / div > groovy < div id = "正确" > < / div >

The result is this - and I added the blue baseline, and the red line box: What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.