Почему моя статья не работает в foreach l oop?

Question

Не могу понять, почему моя статья не работает в PHP. В видео это работает, но когда я пытаюсь сделать это сам, я не могу заставить его работать. В видео он создает Html статей в каждом l oop. Это написано в курсе именно так. 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

Вы должны включить CSS в свой проект (PHP файл), например:

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>

Это даст вам желаемый макет: