绝对/相对定位会干扰相邻div的对齐

Question

我正在使用绝对和相对定位在容器div中水平和垂直居中放置div。 与该容器相邻的是另一个div，它应整齐地放置在顶级容器div内的容器旁边。 但是，它向下移动，几乎完全脱离了顶层div的边界。 源代码：

 #top-level { background: #90c0ff; height: 400px; width: 600px; } #container { background: #bbffbb; height: 400px; width: 400px; display: inline-block; position: relative; text-align: center; } #inner { height: 200px; width: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid black; } #adjacent { background: #ff5050; height: 395px; width: 195px; display: inline-block; } 

 <div id="top-level"> <div id="container"> <div id="inner"> Internal Text </div> </div> <div id="adjacent"> Sample text </div> </div> 

示例在这里摆弄

关于相邻div为何无法正确对齐的任何想法？

Answer 1

您可以在父级上使用flex而不是在子级上使用inline-block，这样可以解决如果空间不足的话第二个盒子被压下的问题：

 #top-level { background: #90c0ff; height: 400px; width: 600px; } #container { background: #bbffbb; height: 400px; width: 400px; position: relative; text-align: center; display: inline-block; vertical-align:top; } #inner { height: 200px; width: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid black; } #adjacent { background: #ff5050; height: 395px; width: 195px; display: inline-block; vertical-align:top; } 

 <div id="top-level"> <div id="container"> <div id="inner"> Internal Text </div> </div> <div id="adjacent"> Sample text </div> </div> 

如果您想知道对齐问题的实际原因，那是因为您有两个高度不同的内联块元素。

内联块元素的默认垂直对齐方式是基线，这意味着您将获得所看到的效果。

如果将容器和相邻容器的垂直对齐方式都更改为顶部对齐，则代码将按需要工作：

 #top-level { background: #90c0ff; height: 400px; width: 600px; /* add te following */ display: flex; justify-content: space-between; } #container { background: #bbffbb; height: 400px; width: 400px; position: relative; text-align: center; } #inner { height: 200px; width: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid black; } #adjacent { background: #ff5050; height: 395px; width: 195px; } 

 <div id="top-level"> <div id="container"> <div id="inner"> Internal Text </div> </div> <div id="adjacent"> Sample text </div> </div>