为什么“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％的物体，要么它们会相互重叠，要么根据它们相对于彼此的位置走到下一行。