Css 在1个主DIV的每侧放置一个DIV

如何将4个DIV放置在另一个DIV的两侧

一个在北，一个在南，一个在西，一个在东

<div id="frame">
  <div id="north"></div>
  <div id="east"></div>
  <div id="map"></div>
  <div id="south"></div>
  <div id="west"></div>
</div>

我怎样才能做到最好

---

编辑：

谢谢你迄今为止的回答。我希望Navi Div不是绝对定位的，而是更像“链接”到map Div。很抱歉，缺少信息

我现在使用jQuery的

mouseleave

函数来确定离开地图时鼠标移动的方向。这样就完成了。

我创建了一个小提琴演示您的示例。它使用相对->绝对定位。它假定您知道元素的确切宽度/高度

标记：

<div id="frame">
  <div id="north">north</div>
  <div id="east">east</div>
  <div id="map">map</div>
  <div id="south">south</div>
  <div id="west">west</div>
</div>

我使用了一些背景色，所以它更清晰

希望能有所帮助。

我已经创建了一个小提琴演示您的示例。它使用相对->绝对定位。它假定您知道元素的确切宽度/高度

标记：

<div id="frame">
  <div id="north">north</div>
  <div id="east">east</div>
  <div id="map">map</div>
  <div id="south">south</div>
  <div id="west">west</div>
</div>

我使用了一些背景色，所以它更清晰

---

希望有帮助。

解决了我的问题：我现在使用jQuery的mouseleave函数来确定离开地图时鼠标移动的方向。这样就完成了。

解决了我的问题：我现在使用jQuery的mouseleave函数来确定离开地图时鼠标移动的方向。这样就完成了。

北面、地图和南面的宽度是相互独立的吗？不，地图、北面和南面的宽度是相同的。这些div是用来捕捉鼠标移动来导航的。这里有一个jsfiddle：你能解释一下“链接”到map div是什么意思吗？你认为“联系”是什么？应该是无边界的边界。没有逻辑连接。北、地图和南的宽度是相互独立的吗？不，地图的宽度，北和南是相同的。这些div是用来捕捉鼠标移动来导航的。这里有一个jsfiddle：你能解释一下“链接”到map div是什么意思吗？你认为“联系”是什么？应该是无边界的边界。没有逻辑链接。

#frame {width: 450px; height: 450px; position: relative; margin: auto;}

#frame div {position: absolute; width: 150px; height: 150px;}

#map {top: 150px; left: 150px; background-color: orange;}

#east {right: 0px; top: 150px; background-color: yellow;}

#west {left: 0px; top: 150px; background-color: blue;}

#north {left: 150px; top: 0; background-color: green;}

#south {left: 150px; bottom: 0; background-color: gray;}