谷歌图表工具提示中的DIV定位

我在google geochart工具提示中的某个div位置出现问题。谷歌图表工具提示中的DIV定位

其中一些看起来很不错，你可以在这里看到

但萨姆看坏，因为这里（如果dropname div有一条线，该HEADER2格将移动到右）

和下面

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吗？

来源

2017-05-06 Patcharapan

从#dropname声明中删除display: inline-block;。这会让divs回到正常的块级别，并且他们将被迫显示一个在另一个之上。

另请尽量不要使用<br><br>。这不被认为是最佳做法。相反，增加一些余量，所以你的最后宣言是：

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

其实我不喜欢人为地设定“高度”的外观有两种，所以我就删除了！ :)

来源

2017-05-06 19:10:45 mayersdesign

试过，但仍然一样，我想因为我设置了主DIV {display：inline-block}，但我设置了修复页面上的另一个div，你可以在这里看到页面http：// sagisepr。 com/CLEANMAPS/test1menu.html如果我删除，单选按钮和img将位置错误。我不知道该怎么做，希望你能帮助我，谢谢。 – Patcharapan

如果你添加了解决其他问题。然后在那个“别的东西”上添加一个新类，然后用display：inline-block样式定位该类。你真的不应该像div {inline-block}那样做一些“广泛的事情”。你需要针对你需要做的具体事情，无论是通过class或id。 – mayersdesign

好的。实际上在上面的代码中添加了“display：block”。这将“击败”您在别处设置的div {display：inline}。 – mayersdesign

谷歌图表工具提示中的DIV定位

回答

相关问题