Html div重叠，如何修复？CSS

我想放置两个相邻的div，否则它们会低于另一个div

Div 1 Div 2
----  ----
|  |  |  |
|  |  |  |
----  ----

到目前为止，在我的代码中最终发生的是，它们的重叠类似于以下内容：

-----
|| ||
|| ||
-----

这是我目前的代码：

@media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        position: absolute;
        left: 0px;
    }
    #div2 {
        position: absolute;
        right: 0px;
    }
}

正如你所看到的，我想把div#div2放在右边，而另一个保持在左边。 另外，我希望只有当浏览器窗口的宽度在40到60 rem之间时才会发生这种情况

但在我的代码中，它们是重叠的。我希望它们整齐地并排放置

---

如果我能得到一些帮助就太好了。

请尝试以下方法：

@media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        float: left;
        width: 200px; /* change this value to your own needs */
    }
    #div2 {
        float: right;
        width: 200px; /* change this value to your own needs */
    }
}

---

下一次，在

中提供一个代码示例将非常有帮助，因为两个div的包装器不在那里或者不够宽。这应该起作用：

#wrapper {
    position: relative;
    width: 100%;
}

#leftDiv {
    position: absolute;
    left: 0px;
    width: 100px;
    border: 1px dotted red;
}

#rightDiv {
    position: absolute;
    right: 0px;
    width: 100px;
    border: 1px dotted red;
}

<div id="wrapper">
    <div id="leftDiv">On the left side</div>
    <div id="rightDiv">On the right side</div>
</div>

#包装器{
位置：相对位置；
宽度：100%；
}
#左撇子{
位置：绝对位置；
左：0px；
宽度：100px；
边框：1px点红色；
}
#右舵{
位置：绝对位置；
右：0px；
宽度：100px；
边框：1px点红色；
}
在左边
在右边

---

您也可以将两个div都向左浮动，但我想您需要使用绝对定位。

如果两个div可以在40rem到60rem的范围内并排放置，那么您发布的代码就可以正常工作

演示

如果它们不合适，那么您可能必须更改媒体查询的范围，或者将该媒体查询中的宽度更改为50%，例如

@media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        position: absolute;
        left: 0px;
        width:20rem; /*example width that can fit side by side with the div2 width*/
    }
    #div2 {
        position: absolute;
        right: 0px;
        width:20rem; /*example width*/
    }
}

---

可以向左浮动，也可以向右浮动？它们的宽度是多少？它们从该媒体查询之外的规则继承了哪些其他CSS属性？一个有效的演示会有很大的帮助，但效果并不奇怪。然后div2将被放置在div1的下面。@Gaby我应该发布整个代码吗？似乎是这样的，因为屏幕太小，无法同时包含两个div。不过我不确定。你能给我一张截图吗？