绝对定位的父内嵌入块元素的奇怪行为

我有几个<div>有display:inline-block，位于一个absolute位于父母<div>。绝对定位的父内嵌入块元素的奇怪行为

HTML

<div id='wrap'> 
    <div id='container'> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'>&#64;</div> 
    <div class='box'></div> 
    </div> 
</div>

CSS

*{ 
margin:0; 
} 
html, body{ 
height:100%; 
} 
#wrap{ 
position:relative; 
background:lightgreen; 
height:100%; 
} 
#container{ 
position:absolute; 
bottom:0px; 
vertical-align:baseline; 
} 
.box{ 
display:inline-block; 
width:80px; 
height:120px; 
background:white; 
border:1px solid; 
}

当我在任何<div> S的添加一些ASCII字符代码，奇怪的其他<div>的举动了。如果我删除ascii字符，则所有<div> s在同一行中完美对齐。

检查这个JSFiddle

我知道其他方式使这一布局，我可以做的箱子绝对和强制它们定位在父母的底部，我知道CSS3 flex的。

但我对这个具体问题感兴趣，有人可以解释为什么会发生这种情况..？或者我该如何修复它？

更新

我不感兴趣，修复它，因为有很多方法可以实现相同的对齐。我只想了解发生了什么。问题是，divs默认情况下是在底部对齐。为什么当其中一个div在其中具有角色时，其他divs突然在顶部对齐？ Updated Fiddle with both scenarios

边注：当我添加文本的元素里面，如果我添加一个HTML元素，而不是一个字符的所有div对齐仍然在底部的这只发生。

来源

2014-04-06 T J

所有奇怪的事情是所谓的**垂直对齐**，它仅适用于**内联**元素（包括内嵌块），空'div'没有任何内容供我们使用要知道** baseline **应该在哪里，但看起来像是在'div'块的最底部设计的，这个基线位置将穿过当前内联中所有其他元素的基线流量，因此你会看到结果。为了解决这个问题，只需简单地为所有'divs'设置'vertical-align' **或者使用'：empty'选择器来筛选空白div –

为什么空白div没有基线甚至如果它的“高度”被明确设置...？真正的问题是为什么其中一个div获得基线时，其他div突然在顶部对齐？ –

“高度”与基线无关，事实上，“线高”是应该影响基线的因素，但它仅在容器包含某物时才起作用。当它为空时，看起来像默认基线是底部边缘/边界。为什么这样？我相信**这只是一个设计的功能**。你只需要知道它的行为，并相应地调整你的CSS，使其工作... –

.box{ 
display:inline-block; 
width:80px; 
height:120px; 
background:white; 
border:1px solid; 
vertical-align: top; 
}

add vertical-align：top;

来源

2014-09-23 07:04:53 Teranko

绝对定位的父内嵌入块元素的奇怪行为

回答

相关问题