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

Question

我在 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 设置哪个位置？

Answer 1

删除display: inline-block;来自#dropname声明。这将使 div 返回到其正常的 block 级别，并且它们将被迫将一个显示在另一个之上。

也尽量不要使用<br><br> 。这不被认为是最佳实践。相反，添加一些边距，因此您的最终声明将是:

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

事实上，我也不喜欢那里人为设置的“高度”的外观，所以我也会将其删除! :)