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

回答

相關問題