Divs重叠，如何解决？ CSS

我想要定位两个彼此相邻的div，否则它们之间是相互位置下的。Divs重叠，如何解决？ CSS

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之间时。

但与我的代码它们重叠。我希望他们并排摆放。

如果我能得到一些帮助，会很好。

来源

2014-11-04 LoLei

向左浮动，向右浮动是可能性？ – vaso123 2014-11-04 14:22:22

它们的宽度以及它们从此媒体查询以外的规则继承的其他CSS属性是什么？一个工作演示会帮助很多。 – 2014-11-04 14:23:57

不奇怪地工作。然后div2将被放置在div1下方。 – LoLei 2014-11-04 14:25:12

请尝试以下方法：

@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

来源

2014-11-04 14:24:59 andufo

这对我工作，但也要感谢其他人！ – LoLei 2014-11-04 17:21:35

不客气！ – andufo 2014-11-05 05:05:19

代码的一个例子，两个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>

你也可以只漂浮到左边，但我想你需要使用绝对定位。

来源

2014-11-04 14:26:30 JasonK

你贴的代码会工作得很好，因为它是如果的两个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/

来源

2014-11-04 14:38:40

Divs重叠，如何解决？ CSS

回答

相关问题