在1个主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;为中心。 map的width和height可以改变。围绕它的每个Div应该没有问题。边境。

看到这张照片：

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

我怎样才能做到这一点最好的吗？

编辑：

感谢迄今答案。我希望Navi Divs不是绝对定位的，但更像是“链接”到地图Div。对不起，缺少信息。

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

来源

2012-11-03 Patrick

北方，地图和南方的宽度是否相互独立？ – Stumbler

没有地图的宽度，南北都是一样的。这些Div用于捕捉鼠标移动进行导航。 – Patrick

敲了一个jsfiddle在这里：http://jsfiddle.net/seSfK/1/ – alimac83

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

来源

2012-11-09 21:54:17 Patrick

我创建了一个小提琴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颜色，以便更清晰可见。

希望它有帮助。

来源

2012-11-03 23:00:41

在1个主DIV的每边放置一个DIV

回答

相关问题