在HTML中显示图像的多个实例？

Question

I want to display an image in a row multiple times, I have coded the following (mix of HTML/PHP/CSS):

for ($i=20; $i<=320; $i=$i+300) {
    echo "<style> " 
      . ".test{"
      . "position: absolute;
         left: " . $i . "px;"
      .  "top: " . 430 . "px;"
      . "</style>";
    echo "<img src=http://localhost/Summoner's%20Index/images/scheme.png class=test>" . "<br />" . "<br />";
}

My problem is, that each time the image gets placed again, the old disappears, so that in the end there is just one instance of the image. How can I change that?

Answer 1

each loop your re-declaring the style, since all images are using the one style, they are all slowly being moved to lay right on top of each other no matter how many times you loop through.

Pull out the style from the loop, instead add some inline css on the img tag, utilizing position absolute and your dynamic top and left values.

<?
for($i=0;$i<50;$i++)
{
    $left = $i*300;
    ?><img src='blah.jpg' style='position:absolute; left:<?=$left?>px;'><?  
}
?>