Absolute/relative 定位会破坏相邻 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>

Example fiddle here

关于为什么相邻 div 没有正确对齐的任何想法？

Answer 1

您可以在父级上使用 flex 而不是在子级上使用 inline-block，这样可以解决第二个框在没有足够的情况下被推下的问题 space:

#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>

Absolute/relative 定位会破坏相邻 div 的对齐

Absolute/relative positioning disrupts alignment of adjacent div

html

css

css-position