以下是我的代码，我想了解为什么#firstDiv被所有浏览器向下推。我真的很想了解它的内部工作原理为什么它被向下推，而不是以某种方式向上拉。(而且我知道如何对齐它们的顶部:))
我知道它的溢出是隐藏的;这导致了它，但不确定为什么它把div往下推。
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>
http://jsfiddle.net/WGCyu/。
尝试使所有元素的所有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.
