1

別の DIV の両側に 4 つの 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とのは変更することheightが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 に答える