时间戳

首页 > 解决方案 > 如何在不改变卡片高度或干扰其他元素位置的情况下添加元素

html - 如何在不改变卡片高度或干扰其他元素位置的情况下添加元素

问题描述

如何在不改变卡片高度的情况下在末尾添加元素（图像），卡片高度设置为自动

有没有办法解决这个问题？任何帮助表示赞赏，谢谢！

.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

标签： htmlcssdjango

解决方案

尝试给卡片位置：相对和图像位置：绝对。并删除图像周围的跨度。我认为这样定位会更容易。所以你可以给它一个底部：-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*/
}

在codepen中检查：https ://codepen.io/flpfar/pen/vYNJGNr

希望能帮助到你 ：）

推荐阅读