为什么＆＃34; POSITION：RELATIVE＆＃34;弄乱了什么？

Question

如果您为正确的position:relative启用，则会看到它溢出左边的那个：

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

为什么呢？ 如何解决（同时保持position:relative）。此外，我希望当使用INSPECT进行鼠标悬停时，右边的不应该溢出左边。

P.S。我不希望calc，因为它还没有得到很好的支持......

Answer 1

这是一个解决方案：

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

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

你的问题是一个div有一个浮动而另一个不是 - 如果你要并排放两个项目你也不能有一个宽度为100％的div，要么它们会相互叠加，要么根据他们相对于彼此的位置，进入下一行。