如何在foreach循环中的照片下显示名称

Question

编辑：我正在使用PHP来完成此操作。

我正在制作一个从数据库（名称，照片路径）中绘制信息的页面，我希望它显示图片，然后显示它下面的名称。

foreach ($result_array as $la) { 
    $firstname = $la['first_name']; 
    $lastname = $la['last_name']; 
    $fullname = $firstname . ' ' . $lastname; 
    $image = $la['photo']; 
    echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/> '.$fullname.' '; 
} 

截至目前，被旁边的照片显示的名称，只是很糟糕。我会如何着手让名字出现在照片下方？

Answer 1

虽然比简单添加换行符稍多一点的代码，但您可以将图像包装在<figure>中，并在<img>之后添加<figcaption>。

foreach ($result_array as $la) { 
$firstname = $la['first_name']; 
$lastname = $la['last_name']; 
$fullname = $firstname . ' ' . $lastname; 
$image = $la['photo']; 
echo '<figure><img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/><figcaption>'.$fullname.'</figcaption></figure>'; 
} 

，每行显示多幅图像，添加以下你的CSS：

figure { 
    display: inline-block; 
} 

检查它在这个jsfiddle。

Answer 2

试试这个：添加<br>创建一个换行符

foreach ($result_array as $la) { 
    $firstname = $la['first_name']; 
    $lastname = $la['last_name']; 
    $fullname = $firstname . ' ' . $lastname; 
    $image = $la['photo']; 
    echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/> <br>'.$fullname.' '; 
}