时间戳

首页 > 解决方案 > 绝对/相对定位会破坏相邻 div 的对齐

html - 绝对/相对定位会破坏相邻 div 的对齐

问题描述

我正在使用绝对和相对定位在容器 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 不能正确对齐的任何想法？

标签： htmlcsscss-position

解决方案

您可以在父级上使用 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>

推荐阅读