Question

我想把彼此相邻的两个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之间时才会发生这种情况。

但是我的代码重叠了。我希望它们能够整齐地排列在一起。

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

Answer 1

请尝试以下方法：

@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 */
    }
}

下次，在jsfiddle.net

中提供代码示例会非常有帮助

Answer 2

两个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>

你也可以向左浮动，但我想你需要使用绝对定位。

Answer 3

你发布的代码可以正常工作，如果这两个div可以在两者之间并排放置（宽度之和） 40rem和60rem

http://jsfiddle.net/gaby/xb6smptx/1/

演示

如果它们不合适，则可能必须更改媒体查询的范围，或将该媒体查询的宽度更改为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*/
    }
}

http://jsfiddle.net/gaby/xb6smptx/2/

Divs重叠，如何解决？ CSS

3 个答案: