1

如何将 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;。的widthandheight可以map改变。它周围的每个 Div 都应该是整洁的。边界。

看这张图片：

     |-------|
     |  n    |
|----|-------|----|
|  w |  map  |  e |
|----|-------|----|
     |  s    |
     |-------|

我怎样才能做到最好？

编辑：

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

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

4

2 回答 2

4

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

标记：

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

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

希望能帮助到你。

于 2012-11-03T23:00:41.267 回答
0

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

于 2012-11-09T21:54:17.153 回答