如何在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.' '; 
}