PHP批量生成资料卡片时媒体元素布局异常求助

问题原因 #

• 输出时机错误：component_language_box函数使用echo直接输出图片标签，批量生成代码中执行$languagebox = component_language_box(...)时，echo会立即把图片内容输出到页面，而非存入变量，导致图标出现在滚动容器<span class="langauge-box-scroller">之前。
• 函数未正确返回内容：函数里的<span class="langauge-box-scroller">和</span>仅定义了字符串但未输出或返回，且函数最后return;无返回值，导致$languagebox为空，容器内无内容，图标却提前输出。
• 冗余代码：函数内的$FirstName、$LastName等变量未使用，属于无效代码。

解决方案 #

修改component_language_box函数，将内容拼接为字符串并返回，而非直接echo，同时移除冗余代码：

修复后的component_language_box函数 #

function component_language_box($python, $C, $C_plus_plus, $java, $html, $css, $php, $kotlin, $C_sharp, $swift, $ruby, $row)
{
    // 初始化内容，包含滚动容器开头标签
    $content = "<span class=\"langauge-box-scroller\">";

    if ($python == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/Python-language.png\" border=\"5\">";
    }
    if ($C == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/C.png\" alt=\"C no img\" border=\"5\">";
    }
    if ($C_plus_plus == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/C++.png\" alt=\"C_plus_plus no img\" border=\"5\">";
    }
    if ($java == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/java.png\" alt=\"java no img\" border=\"5\">";
    }
    if ($html == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/html.jpg\" alt=\"html no img\" border=\"5\">";
    }
    if ($css == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/css.png\" alt=\"css no img\" border=\"5\">";
    }
    if ($php == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/php.png\" alt=\"php no img\" border=\"5\">";
    }
    if ($kotlin == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/kotlin.png\" alt=\"kotlin no img\" border=\"5\">";
    }
    if ($C_sharp == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/C#.png\" alt=\"C_sharp no img\" border=\"5\">";
    }
    if ($swift == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/swift.jpg\" alt=\"swift no img\" border=\"5\">";
    }
    if ($ruby == 'True') {
        $content .= "<img class=\"media-element\" src=\"pictures/codingthumbnails/picruby.png\" alt=\"ruby no img\" border=\"5\">";
    }

    // 添加滚动容器结尾标签
    $content .= "</span>";

    // 返回拼接好的内容
    return $content;
}

批量生成代码调整 #

移除批量代码中重复的<span class="langauge-box-scroller">标签，同时修复部分语法错误：

$FirstName = $row['first_name'];
$LastName = $row['last_name'][0];
$sub_header = $row['sub_header'];
$about = $row['about'];
$img = $row['img'];
$userid = $row['user_id'];
$languagebox = component_language_box($row['python'], $row['C'], $row['C_plus_plus'], $row['java'], $row['html'], $row['css'], $row['php'], $row['kotlin'], $row['C_sharp'], $row['swift'], $row['ruby'], $row);

$element = 
"
<div class=\"grid-item\" style=\"border-radius: 6px; height: auto;\">
    <form action=\"index.php\" method=\"post\">
        <div class=\"card shadow\"></div>
        <div class=\"card-body\">
            <img class=\"profile-img\" src=\"pictures/profilepictures/profile.$userid.$FirstName.$img\" border=\"10\" width=\"250\" height=\"300\">
            <h3 class=\"card-title\">$FirstName $LastName</h3>
            <h4 class=\"job-title\" style=\"text-align: center;\"> $sub_header</h4>
            $languagebox
            <ul class=\"language-list\">
                <li class=\"social-item\" style=\"padding:50px;\"><a href=\"#\"></a><img src=\"https://via.placeholder.com/150\"></li>
                <li class=\"social-item\"><a href=\"#\"><img src=\"https://via.placeholder.com/150\"></a></li>
                <li class=\"social-item\"><a href=\"#\"></a><img src=\"https://via.placeholder.com/150\"></li> 
            </ul>

            <p class=\"card-text\">
                Example text$about
            </p>
            <h5>
                <span class=\"price\">$sub_header</span>
            </h5>
            <ul class=\"social-list\" style=\"list-style-type: none; display: flex; justify-content: center;\">
                <li class=\"social-item\" style=\"padding:50px;\"><a href=\"#\"><i class=\"fa-regular fa-heart\"></i></a></li>
                <li class=\"social-item\" style=\"padding:50px;\"><a href=\"#\"><i class=\"fa-regular fa-envelope\"></i></a></li>
                <li class=\"social-item\" style=\"padding:50px;\"><a href=\"#\"><i class=\"fa-solid fa-calendar\"></i></a></li> 
            </ul>
        </div>
    </form>
</div>
";

内容的提问来源于stack exchange，提问作者Josh P