圖像並排放置，如何垂直列出圖像？

Question

我不確定如何中斷此代碼，因此以下代碼中的下顎圖像以垂直格式顯示了多個圖像（而不是水平並排顯示）。 因為圖像很寬，所以如果我水平顯示它們會占用很多空間？ 我的編碼知識很基礎，所以如果您能告訴我具體的位置，那將非常有幫助.. :)。 我也不確定是否應該使用分頁符

或一個
，跨度或其他。

                    // Hack for jAwards integration, displays some medals of the user for Kunena 1.6
                $number_medals = 10;  // number of medals to show
                $query = "SELECT b.image, b.name"
            . "\n FROM #__jawards_awards AS a"
            . "\n LEFT JOIN #__jawards_medals AS b ON b.id = a.award"
            . "\n WHERE a.userid=". $this->profile->userid
            . "\n ORDER BY RAND() LIMIT ".$number_medals;

        $database = &JFactory::getDbo(); 
        $database->setQuery( $query );
                $medals = $database->loadObjectList();

                // URL links to the jAwards-Tab for Community Builder which displays all
                // medals of the user - change to another URL of needed
                $awards_url=JRoute::_('index.php?option=com_comprofiler&task=userProfile&user='.$this->profile->userid."&tab=getawardstab");

                // CSS-class "ja_medals" allows individual styling of medal images and
                // container. "nobr" keeps the medals from breaking apart, display them 
                // in one row.
                $msg_jawards = "<div class=\"ja_medals\"><nobr>";
            foreach ($medals as $med){
        $msg_jawards.= "<a href=\"$awards_url\" title=\"$med->name\">" 
            . "<img style='border:0px;padding:0px;' src=\"".KUNENA_JLIVEURL."/images/medals/".$med->image ."\" alt=\"".$med->name."\" />"
            . "</a>";    
        }

        $msg_jawards.="</nobr></div>";
        unset($medals);
        echo $msg_jawards;

?>

Answer 1

在圖像之間添加<br/> ，如下所示：

<img src="..." />
<br />
<img src="..." />

Answer 2

從代碼中刪除<nobr>標記，並在樣式表文件中添加以下行

.ja_medals img { display: block; }

Answer 3

$ msg_jawards。=“名稱\\”>“。”圖像。“ \\” alt = \\“”。$ med->名稱。“ \\” />“。”
“；將<BR />標記放在末尾。或將圖像放在P標記內