PHP 和 HTML 显示的图像不同

Question

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

问题是当我用这个 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

注意到 space 与 PHP 一起显示时的白色了吗？我究竟做错了什么？如果您需要一些其他代码或想在网站上实际使用它，请告诉我。

感谢您的帮助。 :)

Answer 1

在您的 html 代码中，第 2n 篇文章标签（第 2、4、...）具有“6u$”class 而不是“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;

PHP 和 HTML 显示的图像不同

The images are displayed different with PHP and HTML

html

php

gallery