Question

我正在将一个网站作为学校项目，并且在使网格模板区域正常工作方面遇到困难。我在扩展到标题的主索引上使用了相同的方法，并且效果很好，所以我不确定为什么不想这样做。

它应该给我一个区域，图像和信息在描述下是一个接一个的，但是却像没有任何CSS格式一样，将它们都放在另一个下

{% extends "_global/index.html" %}

{% block main %}

<div class="book-info">

    <img src="{{book.book_id}}.jpg" alt="{{ book.name|escape }}" height="300" width="200" class="book-image">

    <div class="book-info-1">
        <h1>{{ book.name|escape }}</h1>
        <h3>Original name: {{ book.original_name⁯ }}</h3>
        <p>Authors: </p>

        {% for authors in authorName %}
        <a href="/goranPL/author/{{ authors.author_id }}">
            {{ authors.first_name }}
            {{ authors.last_name }}
        </a>
        </br>
        {% endfor %}

        <p>Publisher: <a href="/goranPL/publisher/{{ book.publisher_id }}">{{ publisher.name }}</a></br></p>
        <p>Publishing year: {{ book.publishing_year }}</p>
        <p>Nr of pages: {{ book.pages }}</p>
        <p>ISBN: {{ book.isbn }}</p>
        <p>Book language: {{ book.language|escape }}</p>

        Genres:
        {% for name in bookName %}
        <a href="/goranPL/genre/{{ name.genre_id }}">
            </br>
            {{ name.name }}

        </a>
        {% endfor %}

        <p>
            Last book placement: <a href="/goranPL/bookPlacement/book/{{ book.book_id }}">
                {{bookPlacement.placed_at}}</a></br>
        </p>
    </div>
</div>

<div class="book-description">
    <p>Description: {{ book.description|escape }}</p>
</div>


{% endblock %}

.book-info {
    display: grid;
    grid-template-areas:
        "image       info"
        "description description"
        "description description"
}

.book-image {
    grid-area: image;
}

.book-info-1 {
    grid-area: info;
    text-align: left;
}

.book-description {
    grid-area: description;
}

Answer 1

我不确定发生了什么变化，但是在第二天再次启动服务器之后，除了将描述移至主div之外，它没有任何变化。

无法弄清楚如何使用网格模板区域对齐元素

1 个答案: