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

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

现在我们又回到了起点。

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

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

首先，我们需要理解什么是内联块。 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.

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

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

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

首先我们要确定真正的问题是什么? 这就是为什么“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>" 
);