Я не могу разместить текст и видео в одной сетке в django с помощью css

У меня есть приложение, которое включает 3 видео (со временем оно будет включать больше). Я создал модель в models.py и передал курсы в шаблон с контекстом в моем представлении. Я хочу, чтобы заголовок был в рамке под видео, но он принимает странную позу. weird pose.

Я оставил немного места под изображением для заголовка.

html

<div class="next">
        {% for course in courses %}
            {{ course.title }}
            <video src="/media/{{ course.videofile }}" controls=controls type="video" class="video">{{ course.title }}</video>
        {% endfor %}
</div>

css

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}

Если я помещаю цикл for в другой div, он работает лучше, но заголовки находятся над видео.

html

<div class="next">
        {% for course in courses %}
            <div class="div">
                {{ course.title }}
                <video src="/media/{{ course.videofile }}" controls=controls type="video" class="video">{{ course.title }}</video>
            </div>
        {% endfor %}
    </div>

(css одинаковый)

enter image description here

Если я помещаю цикл for loop в другой div, он работает лучше, но заголовки выше видео. - Обновите ваш CSS вот так

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    min-width: 15em;
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}
.video *{
    width: 100%;
}

и HTML будет выглядеть следующим образом

<div class="next">
  {% for course in courses %}
     <div class="video">
            {{ course.title }}
            <video src="/media/{{ course.videofile }}" controls=controls type="video" >{{ course.title }}</video>
        </div>
 {% endfor %}
</div>

Пример работы

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    min-width: 15em;
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}
.video *{
    width: 100%;
}
<div class="next">
  
  <div class="video">
   <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls=controls type="video"></video>
   Big Buck Bunny
  </div>
  
  <div class="video">
   <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls=controls type="video"></video>
   Big Buck Bunny
  </div>

</div>

используйте тег div, и решите проблему.

Вернуться на верх