Как заставить изображения накладываться друг на друга, не затрагивая родительский элемент - PullRequest
Новая
       3

Как заставить изображения накладываться друг на друга, не затрагивая родительский элемент

1 голос
/ 18 февраля 2020

У меня есть этот код, который создает код HTML, который показывает карту. Внутри карты есть изображение, заголовок, цена, местоположение и описание. И если вы нажмете на карту, она свяжет вас с конкретным c веб-сайтом.

И в некоторых картах есть несколько изображений. Но проблема в том, что если есть несколько изображений, они просто выстраиваются вертикально. Когда я пробовал position: absolute;, он укладывал изображения друг на друга. НО, это также стек Название, Цена, Местоположение и Описание.

Django template HTML: 

{% for info in post %}
        <a class="link_to_detail" href="{{ info.5 }}">
          <div class="card">
            {{ info.0|safe }}
            <div class="description">
              <h3>{{ info.1 }}</h3>
              <p>{{ info.2 }}</p>
              <p><strong>{{ info.3 }}</strong></p>
              <p>{{ info.4|truncatechars:150 }}</p>
            </div>
          </div>
        </a>
{% endfor %}

Мои views.py на изображениях (я новичок в программировании ..): 

import requests
from bs4 import BeautifulSoup


for li_tag in li_tags:
    first_a_tag = li_tag.find('a')
    detail_page_url = first_a_tag.get("href")
    detail_response = requests.get(detail_page_url)
    detail_src = detail_response.text
    detail_soup = BeautifulSoup(detail_src, 'lxml')

    if first_a_tag.get("data-ids") and isinstance(first_a_tag.get("data-ids").split(','), list):
        post_image_list = first_a_tag.get("data-ids").split(',')
        post_image_setup = []
        post_image_process = first_a_tag.get("data-ids").split(',')
        for images in post_image_process:
        post_image_setup.append('<img src="' + BASE_IMAGE_URL.format(images.split(':')[1]) + '" class="image">')
        post_image_setup.reverse()
        post_image_combine = ''.join(post_image_setup)
        post_image = '<div class="images slides">' + post_image_combine + '</div>'


    elif first_a_tag.get("data-ids") and isinstance(first_a_tag.get("data-ids"), str):
        post_image = '<div class=images><img src=' + BASE_IMAGE_URL.format(first_a_tag.get("data-ids").split(',')[0].split(':')[1]) + ' class=image></div>'

    else:
        post_image = '<div class="images"><img src="https://www.quantabiodesign.com/wp-content/uploads/No-Photo-Available-768x960.jpg"></div>'

Что он делает, когда я делаю position: absolute; (left and right) (middle one is what I want to happen)

...