爲什麼「POSITION：RELATIVE」會弄亂事情？

Question

如果你是正確的啓用position:relative，你會看到，它溢出留下一個：

http://jsfiddle.net/bfwhoem5/1/

爲什麼呢？ 如何解決（同時維護position:relative）。另外，我希望在使用INSPECT進行鼠標懸停時，正確的一個不應該在左邊溢出。

p.s.我不希望calc，因爲它是沒有很好的支持...

Answer 1

這裏是一個解決方案：

#left { 
 
    position:relative; 
 
\t float:left; width:180px; background:#ff0000; 
 
} 
 
#right { 
 
    position:relative; 
 
\t width: calc(100% - 180px); \t background:#00FF00;float:left; 
 
}

<div> 
 
\t <div id="left"> 
 
\t \t leftttt 
 
\t </div> 
 
\t <div id="right"> 
 
\t \t rightttt 
 
\t </div> 
 
</div>

你的問題是與具有浮動一個DIV和其他不 - 同樣，如果你打算把兩個物品並排放置，你不能有一個寬度爲100％的物體，要麼它們會相互重疊，要麼根據它們相對於彼此的位置走到下一行。