Question

我<div>位于display:inline-block的父级absolute内<div> <div id='wrap'> <div id='container'> <div class='box'></div> <div class='box'></div> <div class='box'>@</div> <div class='box'></div> </div> </div>。

HTML

*{
 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;
}

CSS

<div>

当我在任何<div>中添加一些ascii字符代码时，奇怪的是其他<div>向上移动。如果我删除了ascii字符，那么所有flex都完全对齐在同一行。

检查此JSFiddle

我知道制作此布局的其他方法，我可以将框设置为绝对，并强制它们位于父级的底部，我知道css3 {{1}}。

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

更新

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

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

Answer 1

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

添加vertical-align：top; 什么时候

内联块元素在绝对定位父元素内的奇怪行为

1 个答案: