javascript - 根据特定DIV在css中的位置定位其他DIV

Question

我还是网络新手，所以这对我来说有点棘手。我有一个类(class) 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？另外，我正在为移动设备开发，你能给我一些关于如何利用媒体查询的想法吗？

Answer 1

如果元素被absolute定位，因为它们从正常流中移除，将没有机会相对于彼此定位元素。

如果你计划在同一行的中间垂直对齐元素，你可以简单地将它们显示为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这增加了元素之间的实际空间并可能导致问题。