将DIV放在1个主DIV的每一侧

Question

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

北部1个，南部1个，西部1个，东部1个。

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

注意：框架以margin: auto;为中心。 width的{​​{1}}和height可能会发生变化。围绕它的每个Div应该对corr整洁。边界。

看到这张图片：

map

我怎样才能做到最好？

---

修改

感谢目前为止的答案。我希望Navi Divs不是绝对定位，而是更像是与地图Div的“链接”。很抱歉缺少信息。

我现在正在使用jQuery的 |-------| | n | |----|-------|----| | w | map | e | |----|-------|----| | s | |-------| 函数来确定离开地图时鼠标移动的方向。所以这样做了。

Answer 1

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

标记：

<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>

CSS：

#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;}

我使用了一些bg颜色，因此它更明显。

希望它有所帮助。

Answer 2

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