PHP：创建文本和图像列表显示图像重叠的文字

我有一个数组式的字符串，其中包含国家的变量列表，用逗号分隔。例如这可能是：德国，爱尔兰，瑞典，美国PHP：创建文本和图像列表显示图像重叠的文字

我正在使用下面的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);

非常感谢任何帮助，迈克。

来源

2014-04-30 Mike

这看起来不像PHP问题。它看起来像HTML/CSS的问题。 – Phylogenesis

我很确定这不是问题，但您的国家名单应引用。这可能只是一个错字。在这种情况下，我会告诉您完全按照您的代码粘贴您的代码，以便我们看到您真正在做什么。 –

@PatrickQ：谢谢，是的，这只是一个错字 - 会纠正。 – Mike

-1

正如帕特里克所说，国家名单看起来不像一个字符串。此外，搜索的分隔符包含一个空格。

尝试：

$inputCountries = explode(",", "Germany,Ireland,Sweden,United States"); // hard-coded for testing

亲缘关系大概也是说得对HTML格式。尝试：

$inputCountries[$key] = "<span><img src='images/icons/flags-32/flag_" . $country1 . ".png' alt='' /></span>&nbsp;<span>" . $val . "</span>&nbsp;&nbsp;";

来源

2014-04-30 13:25:43 Skrrp

一个可能的解决方案，使用一些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标签。

来源

2014-04-30 13:27:54 clami219

非常感谢，解决了这个问题！ :) – Mike

我发现了一个更简单的方法来解决这个问题。

如果我只是将与图像宽度相同的样式（style='width:32px'）添加到img标记中，而不是保持宽度和空格，即使加载图像需要的时间比其余时间长。

$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='width:32px' />&nbsp;" . $val . "&nbsp;&nbsp;"; 
} 
$countries = implode("&nbsp;&nbsp;", $inputCountries);

来源

2014-04-30 14:33:49 Mike

PHP：创建文本和图像列表显示图像重叠的文字

回答

相关问题