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

Question

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

, есть ли способ решить эту проблему? любая помощь приветствуется, спасибо!

.card {
  width: 540px;
  height: auto;
  border: 1px solid #707070;
}

.field2 {
  font-family: inherit;
  padding-top: 20px;
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;

}

.log_in_instead {
  padding-left: 60px;
}

.create {
  padding-right: 70px;
}

#img101 {
  position: relative;
  left: 490px;
  top: -150px;

}

  <div class="card">
  
    <div class="field2">
    <span class="log_in_instead"> <a href="#">Log in instead</a> </span>
    <span class="create"><button id="create_button" type="submit">Create</button></span>
    </div>
    
    <span><img src="{% static 'main/images/img101.svg' %}" id="img101"></span>

  </div>

Вот так это должно выглядеть: [1]: https://i.stack.imgur.com/jkPg2.png

Вот так это выглядит как: [2]: https://i.stack.imgur.com/w1ROu.png

Answer 1

Попробуйте указать положение карты: относительное и положение изображения: абсолютное. И удалите промежуток вокруг изображения. Думаю, так будет проще позиционировать. Таким образом, вы можете задать для него нижнюю часть: -50px, справа: -50px (в зависимости от размера вашего изображения).

И проверьте кнопку /, вы не закрываете ее.

Ваш код должен выглядеть следующим образом:

HTML:

<div class="card">

    <div class="field2">
          <span class="log_in_instead"> <a href="#">Log in instead</a</span>
          <span class="create"><button id="create_button" type="submit">Create</button></span>
    </div>

    <img src="{% static 'main/images/img101.svg' %}" id="img101"></>

</div>

CSS:

.card {
  position: relative;
  width: 540px;
  height: auto;
  border: 1px solid #707070;
}

.field2 {
  font-family: inherit;
  padding-top: 20px;
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;

}

.log_in_instead {
  padding-left: 60px;
}

.create {
  padding-right: 70px;
}

#img101 {
  position: absolute;
  width: 100px; /*use your custom size*/
  height: 100px; /*use your custom size*/
  background-color: #000; /*only for visualization*/
  right: -50px; /*use your custom size*/
  bottom: -50px; /*use your custom size*/
}

Проверьте это в коде ручки: https://codepen.io/flpfar/pen/vYNJGNr

Надеюсь, это поможет:)