javascript - 根据CSS中特定DIV的位置来定位其他DIV

我仍然对网络不熟悉，所以这对我来说有点棘手。我有一个类greenApple01

.greenApple01 {
    width: 256px;
    height: 256px;
    background-image: url("fingertwisterimages/newimages/spritesheet_greenApple.png");
    border: 1px solid red;
    position: absolute;
    top: 290px;
    right: 130px;
}

我还有另一个div yellowApple03。

现在我想要实现的是:

如何根据greenApple01的位置来定位yellowApple03？另外，我正在开发移动设备，您能给我一些有关如何利用媒体查询的想法吗？

最佳答案

如果将元素按absolute进行定位(因为它们已从正常流程中移除)，则将没有机会彼此相对定位。

如果计划在同一行的中间垂直对齐元素，则可以简单地将display编码为inline-block，然后将vertical-align: middle;声明给它们以进行垂直对齐。

.greenApple01, .yellowApple03 {
    display: inline-block;
    vertical-align: middle;
}

如果要在这些元素之间添加一些空格，可以使用margin。例如，假设.yellowApple03放在.greenApple01之后:

.yellowApple03 { margin-left: 100px; }

还请注意gap between inline-block elements，它会增加元素之间的实际空间，并可能会造成麻烦。