0

CMS でテンプレートを調整しています。メインページで、左から右に並べたい特定の要素は次のとおりです (説明: 要素名/ID/クラス):

  • ハウツー レポート ボックス (div id="content")
  • マップ (div id="map")
  • カテゴリ フィルタ (div id="right")

すべてが div "main-middle" の下にネストされています。

かなり大きな html のチャンクを投稿するのではなく、Inspect Element からのページ構造の画面を次に示します。

ここに画像の説明を入力

私にとっての主な混乱は、How To Report ボックス (現在はページの下部にあります) が、マップとカテゴリ フィルターと共に浮かんでおらず、これらの要素の下にとどまっていることです。報告方法 ボックス (div id="content") には「里親」がいます。以前はカテゴリ フィルターの下に存在していましたが、言及された他の 2 つの要素と兄弟になるようにレベルを引き上げました。

既存のマージン、フロート、および要素のネストをいじってみました。

リンクはこちら: http://tinyurl.com/lnrtfdo

右の列が本来あるべき場所で、薄くなるマップが本来あるべき場所 (中央) です。マップの下のハウツーボックスは左側の列にする必要があるため、上部がマップの上部と一致します (マップはより薄くなります)。

現在のサイトでは、マップが大きすぎてフロートできませんが、幅を 300px に調整すると、下の要素である How To Report Box が上に移動せず、所定の位置にとどまります。

各要素の現在の CSS は次のとおりです。それぞれに float:right を追加しても解決しません:

The Category Filters:
div#right {
width: 285px;
padding: 0;
float: right;
}

The Map
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 19px;

The Stubborn How to Box that Won't Float
div#main .withright div#content {
margin: 0 325px 0 0;
padding: 0;

左上の適切な場所にボックス化する方法を取得するにはどうすればよいですか?

4

1 に答える 1