DIV定位在谷歌图表工具提示

Question

我在google geochart tooltip中的某个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恢复到正常的块级别，并且它们将被强制显示在另一个之上。

另请尽量不要使用<br><br>。这不是最佳做法。而是添加一些保证金，因此您的最终声明将是：

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

事实上，我不喜欢人工设置“高度”的外观，所以我也会删除它！ ：）