为什么我的文章在foreach循环中不起作用？

Question

我不知道为什么我的文章在PHP中不起作用。在视频中，它可以工作，但是当我尝试自己动手做时，我无法使其工作。在视频中，它在每个循环中创建Html文章。它是完全这样写的。CSS代码为https://pastebin.com/tHdu6UdH它看起来应该像这样：https://ctrlv.cz/Mt7H

<?php
    $directors = [
        (object)[
            'id' => 1,
            'first_name' => 'Edgar',
            'last_name' => 'Wright',
            'country' => 'United Kingdom',
            'birthdate' => '1974-04-18',
        ],
        (object)[
            'id' => 2,
            'first_name' => 'Jim',
            'last_name' => 'Jarmusch',
            'country' => 'United States',
            'birthdate' => '1953-01-22',
        ],
        (object)[
            'id' => 3,
            'first_name' => 'Leos',
            'last_name' => 'Carax',
            'country' => 'France',
            'birthdate' => '1960-11-22',
        ],
        (object)[
            'id' => 4,
            'first_name' => 'Ingmar',
            'last_name' => 'Bergman',
            'country' => 'Sweden',
            'birthdate' => '1918-07-14',
        ],
        (object)[
            'id' => 5,
            'first_name' => 'Andrej',
            'last_name' => 'Tarkovskij',
            'country' => 'Russia',
            'birthdate' => '2000-10-10',
        ],
    ];

    /* echo '<pre>';
        print_r($directors);
    echo '<pre>'; */
?>
<div style='text-align: left'>
    <?php
        foreach ($directors as $data) {
            echo '<article>';
            echo $data->first_name;
            echo $data->last_name;
            echo '</article>';
        }
    ?>
</div>

编辑，我忘了显示$ director。

Answer 1

您必须在项目（PHP文件）中包含CSS，例如：

index.css：

/* general */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* clearfix */
.group:before, .container:before,
.group:after, .container:after {
    content: " ";
    display: table;
}

.group:after, .container:after {
    clear: both;
}

body {
    font-size: 2em;
    text-align: center;
}

img {
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
}

h1.text-muted {
    color: #57aec1; /* questionable */
    /*opacity: .7;*/
}

a {
    text-decoration: none;
}

strong {
    color: #f9c029;
    font-weight: normal;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
}

pre {
    text-align: left;
}


article {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    background: #9F3FA3;
    border-radius: 9px;
    margin-bottom: 25px;
    /*min-height: 320px;*/

    float: left;
    width: 19.2%;

    padding: 40px 14px;
    margin-right: 1%;
}

article h4 {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

article p {
    /*margin-bottom: 0;*/
    font-weight: 300;
}

article a,
article a:hover {
    color: #fff;
}

article:nth-child(1) {
    background: #3b9ae1;
}

article:nth-child(2) {
    background: #f6be00;
}

article:nth-child(3) {
    background: #e64134;
}

article:nth-child(4) {
    background: #eb70b1;
}

article:nth-child(5) {
    background: #0f1a5f;
    margin-right: 0;
}


.comments {
    height: 40px;
    line-height: 37px;
    width: 40px;
    background: url('chat_b.svg') 0 0 no-repeat;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 15px;
}


/* media queries */
@media screen and ( max-width: 820px ) {

    article {
        width: 49.5%; /* 2 elementy su vedla seba, to je 100%, ale medzi nimi je 1% margin, cize 99/2 = 49.5% */
        margin-bottom: 1%;
        min-height: 260px; /* uz mozu byt o nieco nizsie */
    }

    article:nth-child(2),
    article:nth-child(3) {
        margin-right: 0; /* pri druhom a tretom elemente nechceme pravy margin, lebo teraz su na kraji */
    }

    article:nth-child(3) {
        width: 100%; /* treti element je na cely riadok */
    }

}

@media screen and ( max-width: 560px ) {

    article {
        /* uz ziadne marginy */
        margin-right: 0;

        /* elementy budu na celu sirku, pod sebou, ziadne floaty */
        width: 100%;
        float: none;

        /* uz im nebudeme nastavovat minimalnu vysku */
        min-height: 0;
    }

}

index.php：

<?php
    $directors = [
        (object)[
            'id' => 1,
            'first_name' => 'Edgar',
            'last_name' => 'Wright',
            'country' => 'United Kingdom',
            'birthdate' => '1974-04-18',
        ],
        (object)[
            'id' => 2,
            'first_name' => 'Jim',
            'last_name' => 'Jarmusch',
            'country' => 'United States',
            'birthdate' => '1953-01-22',
        ],
        (object)[
            'id' => 3,
            'first_name' => 'Leos',
            'last_name' => 'Carax',
            'country' => 'France',
            'birthdate' => '1960-11-22',
        ],
        (object)[
            'id' => 4,
            'first_name' => 'Ingmar',
            'last_name' => 'Bergman',
            'country' => 'Sweden',
            'birthdate' => '1918-07-14',
        ],
        (object)[
            'id' => 5,
            'first_name' => 'Andrej',
            'last_name' => 'Tarkovskij',
            'country' => 'Russia',
            'birthdate' => '2000-10-10',
        ],
    ];

    /* echo '<pre>';
        print_r($directors);
    echo '<pre>'; */
?>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div style='text-align: left'>
            <?php
                foreach ($directors as $data) {
                    echo '<article>';
                    echo $data->first_name;
                    echo $data->last_name;
                    echo '</article>';
                }
            ?>
        </div>
    </body>
</html>

这将为您提供所需的布局：