0

Webページで2列（3ペイン= 2 + 1）のレイアウトを取得しようとしています。左側のペインには、Googleマップとその下のデータ（詳細div）が表示され、右側の列にはデータ（結果div）が表示されます。しかし、（結果）データdivをGoogleマップの右側に揃えることができません。詳細divの右側のGoogleマップの下に表示されます。これは私のコードです：

CSSコード：

#map_canvas {
    margin: 10px 10px 10px 10px;
}
#details {
    width: 45%;
    height: 20em;
}
#results {
    width: 52%;
    float: right;
    height: 40em;
    overflow: scroll;
}

HTMLコード：

<div id="map_canvas" style="width:45%; height:20em;"></div>
<div id="results"></div>
<div id="details"></div>

現在の出力のスクリーンショット：

http://i.stack.imgur.com/AdVcX.jpg

何が悪いのかわかりません。私はたくさんグーグルをしましたが、それはグーグルマップと関係があると思います。私を助けてください！

4

1 に答える 1

2

実際、現在のCSSとHTMLでは、まさにそのように見えるはずです。

フロートされていないdiv（map_canvasパネル）があるため、HTMLでその後に続くすべて（つまり、パネルresultsとdetailsパネルの両方）はこれより下にあります（またはパネルでmap_canvas絶対または固定の位置が使用されている場合を除きます。ここの場合）。resultsdetails

解決策：結果を最初にHTMLに配置し、左側の2つのペインを別のdivでラップします。

このような：

<div id="results"></div>
<div class="left-col">
    <div id="map_canvas" style="width:45%; height:20em;"></div>
    <div id="details"></div>
</div>

結果はここで確認できます：http ：//dabblet.com/gist/2814665-CSSに加えた唯一の変更は、パネルのアウトラインを追加することでした。

于 2012-05-27T15:09:03.697 に答える