Question

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

plot(a1, type="l",col="red",xlim=c(1,b1),main="Example1", xlab="x", ylab = "y")
plot(a2,type="l",col="blue",xlim=c(1,b2),main="Example2", xlab="x", ylab = "y")

> dput(a1)
c(6, 8, 12, 20, 34, 54, 80, 110, 159, 214, 281, 345, 402, 447, 479, 492, 494, 498, 500)
> dput(b1)
19L
> dput(a2)
c(6, 12, 24, 42, 76, 127, 209, 306, 375, 441, 476, 495, 499,  499, 500)
> dput(b2)
15L

Example fiddle here

关于相邻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>

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

1 个答案: