Блог

Я пытаюсь перебирать JSON-файл при использовании EJS и стилизовать каждый объект как карточку, но он продолжает выглядеть как дочерний элемент внутри каждого объекта, пройденного перед ним.

Вот мой текущий код EJS

 <section class="job-list">

    <% if (job.length > 0) { %>
        <div class="grid">
            <%for(var i = 0; i < job.length; i  ){ %> 
                <article class="card listing-item">
                    <header class="card__header">
                        <img src="<%= job[i].logo %>" alt="">

                    </header>
                    <div class="card__content">
                        <div class="card_content_top">
                            <p class="position_postedAt"><%= job[i].postedAt %></p>
                            <p class="position_contract"><%= job[i].contract %></p>
                        </div>
                        <div class="card_content_bottom">
                            <h1 class="position__position"><%= job[i].position %></h1>
                            <h3 class="position__company">

lt;%= job[i].company %></h3>

                            <p class="position__location"><%= job[i].location %></p>
                        </div>
                    </div>
            <% } %>

        </div>

    <% } else { %>

        <h1>No Jobs found today!</h1>

        <% } %>
</section>

 

В настоящее время я получаю это:

пытаясь сделать его похожим на отдельные карточки:

Я пытался поиграть с использованием сетки с  grid  классом и  listing-item  классом, но он продолжает стилизовать их внутри других.

Я думаю, что вам не хватает закрывающего тега </article> для элемента html статьи.

HTML-тег статьи: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article