PHP:创建文本和图像列表显示图像重叠文本

Question

我有一个类似数组的字符串，其中包含一个可变的国家/地区列表，以逗号分隔。例如。这可能是:德国、爱尔兰、瑞典、美国

我正在使用以下 PHP 行来向每个国家/地区添加图像(国旗)。所有图像都保存在与国家相同的名称下，除了图像名称使用下划线而不是空格。

一切都按预期进行 - 我唯一的问题是图像与(以下)国家/地区的名称重叠。看起来发生这种情况是因为加载图像比获取文本花费的时间更长 + 它会在一两秒后进行调整。

有什么办法可以防止这种情况发生吗？

我的PHP:

$inputCountries = explode(", ", "Germany","Ireland","Sweden","United States"); // hard-coded for testing
foreach($inputCountries as $key => $val) {
$country1 = str_replace(' ', '_', $val); // required to match country and image names
    $inputCountries[$key] = "<img src='images/icons/flags-32/flag_" . $country1 . ".png' alt='' />&nbsp;" . $val . "&nbsp;&nbsp;";
}
$countries = implode("&nbsp;&nbsp;", $inputCountries);

迈克，非常感谢您对此提供的帮助。

Answer 1

一个可能的解决方案，使用一些 css:

$inputCountries = explode(", ", "Germany","Ireland","Sweden","United States"); // hard-coded for testing
foreach($inputCountries as $key => $val) {
$country1 = str_replace(' ', '_', $val); // required to match country and image names
    $inputCountries[$key] = "<img src='images/icons/flags-32/flag_" . $country1 . ".png' alt='' style='padding-right: 10px;'/><span style='padding-right: 10px;'>" . $val . "</span>";
}
$countries = implode("&nbsp;&nbsp;", $inputCountries);

如果需要，您可以考虑将 float:left; 添加到 img 和 span 标签。