GoogleグラフのツールチップにDIVポジショニング

Question

Google geochartのツールチップ内のdiv位置に問題があります。

あなたはここと悪い見て、ここで

を見るが、サムスできるよう細かい探して、それの一部を

（dropnameのdivが1行を持っている場合、HEADER2のdivが右に移動します）

と

return 
 
'<br><div id="country">'+ country + " - " + policy + '<br><br></div> ' + 
 
'<div id="header1">Dominant (E)PR policy model:<br></div>' + 
 
'<div id="dropname">'+dropname + '<br><br></div>' + 
 
'<div id ="header2">Since : </div><div id="date">' + startdate + '</div><br><br><br>' + 
 
'<div id ="comment">' + comment + '<\/div>'

#country{ 
 
\t font-size:16px; 
 
\t font-weight:500; 
 
\t } 
 

 
#header1{ 
 
\t font-size:14px; 
 
\t font-weight:400; 
 
\t color:#666; 
 
\t } 
 
#header2{ 
 
\t font-size:14px; 
 
\t font-weight:400; 
 
\t color:#666; 
 
\t } \t 
 

 
#date{ 
 
\t font-size:14px; 
 
\t font-weight:400; 
 
\t } 
 
#dropname{ 
 
\t font-size:14px; 
 
\t font-weight:400; 
 
\t display: inline-block; 
 
\t height:20px; 
 
\t } 
 

 
#comment{ 
 
\t font-size:12px; 
 
\t font-style:italic; 
 
\t font-weight:400; 
 
\t color:#06F; 
 
\t }

以下ツールチップのためのコード私はそれぞれに設定すべき位置

はここにDIV？

Answer 1

display: inline-block;を#dropname宣言から削除します。これにより、divは通常のブロックレベルに戻り、一方を他方の上に表示するよう強制されます。

<br><br>も試してみてください。これはベストプラクティスとはみなされません。代わりに、その最終的な宣言は次のようになり、いくつかのマージンを追加します。実際には

#dropname{ 
font-size: 14px; 
font-weight: 400; 
height: 20px; 
margin-bottom: 20px; 
} 

私は人為的に設定された「高さ」の外観を好きではないがいずれかので、私はそれも削除します！ :)