PHP和HTML显示的图像是不同的


The images are displayed different with PHP and HTML

我有一个网站,我建立了一个显示照片的功能。

问题是,当我用这个PHP函数显示一个图库时…

<?php
function gallery_1()
{
    $picture_ids = array(   1,10,100,101,102,103,
                            104,105,106,107,108,109,
                            11,110,111,112,113,114,
                            115,116,117,118,119,12,
                            120,121,122,123,124,125,
                            126,127,128,129,13,130,
                            131,132,133,134,135,136,
                            137,138,139,14,140,141,
                            142,143,144,145,146,147,
                            148,149,15,150,151,152,
                            153,154,155,156,157,158,
                            159,16,160,161,162,163,
                            164,165,166,167,168,169,
                            17,170,171,172,173,174,
                            175,176,178,18,19,2,
                            20,21,22,23,28,29,
                            3,30,31,32,33,34,
                            35,36,37,38,39,4,
                            40,41,42,43,44,45,
                            46,47,48,49,5,50,
                            51,6,69,7,8,86,
                            87,88,89,9,90,91,
                            92,93,94,95,96,97,
                            98,99);
    $n = 6;  // number of pictures in each row
    echo '<div class="row">' . PHP_EOL;
    for ($i = 0; $i < count($picture_ids); $i++) 
    {
        // start a new row after each $n pictures
        if (($i > 0) && ($i % $n === 0)) 
        {
            echo '</div>' . PHP_EOL;
            echo '<div class="row">' . PHP_EOL;
        }
        echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
        echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . PHP_EOL;
        echo '</article>' . PHP_EOL;
    }
    echo '</div>' . PHP_EOL;
}
?>

…gallery with PHP

但是如果我在HTML中编写相同的代码,就像这样…

<div class="row">
    <article class="6u 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/1.jpg" class="image fit thumb"><img src="images/thumbs_large/1.jpg" alt="" /></a>
    </article>
    <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/10.jpg" class="image fit thumb"><img src="images/thumbs_large/10.jpg" alt="" /></a>
    </article>
    <article class="6u 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/100.jpg" class="image fit thumb"><img src="images/thumbs_large/100.jpg" alt="" /></a>
    </article>
    <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/101.jpg" class="image fit thumb"><img src="images/thumbs_large/101.jpg" alt="" /></a>
    </article>
    <article class="6u 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/102.jpg" class="image fit thumb"><img src="images/thumbs_large/102.jpg" alt="" /></a>
    </article>
    <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
        <a href="images/originals/103.jpg" class="image fit thumb"><img src="images/thumbs_large/103.jpg" alt="" /></a>
    </article>
</div>

…gallery with HTML

注意到PHP显示时的空白吗?我做错了什么?如果你需要一些其他的代码或想看到它在网站上的实际行动,请告诉我。

谢谢你的帮助。:)

在你的html代码2n文章标签(第2,第4,…)有"6u$"类而不是"6u"。所以如果你像下面这样改变你的php代码,我认为它会像你想要的那样工作。

echo '<div class="row">' . PHP_EOL;
for ($i = 0; $i < count($picture_ids); $i++) 
{
    // start a new row after each $n pictures
    if (($i > 0) && ($i % $n === 0)) 
    {
        echo '</div>' . PHP_EOL;
        echo '<div class="row">' . PHP_EOL;
    }
    if($i % 2 === 0)
    {
        echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
    }
    else
    {
        echo '<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
    }
    echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . PHP_EOL;
    echo '</article>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;