我在 google geochart 工具提示内的某些 div 位置上遇到了问题。
正如您在此处看到的,其中一些看起来不错
但有些看起来很糟糕(如果 dropname div 有一行,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{
font-size:16px;
font-weight:500;
}
#header1{
font-size:14px;
font-weight:400;
color:#666;
}
#header2{
font-size:14px;
font-weight:400;
color:#666;
}
#date{
font-size:14px;
font-weight:400;
}
#dropname{
font-size:14px;
font-weight:400;
display: inline-block;
height:20px;
}
#comment{
font-size:12px;
font-style:italic;
font-weight:400;
color:#06F;
}
我应该为这里的每个 div 设置哪个位置?
最佳答案
删除display: inline-block;
来自#dropname
声明。这将使 div 返回到其正常的 block 级别,并且它们将被迫将一个显示在另一个之上。
也尽量不要使用<br><br>
。这不被认为是最佳实践。相反,添加一些边距,因此您的最终声明将是:
#dropname{
font-size: 14px;
font-weight: 400;
height: 20px;
margin-bottom: 20px;
}
事实上,我也不喜欢那里人为设置的“高度”的外观,所以我也会将其删除! :)
关于javascript - 谷歌图表工具提示中的 DIV 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43824241/