如何解决如何在不影响任何其他元素的情况下使HTML元素“浮动”?
我正在设计产品卡,我希望删除按钮是一个圆形按钮,产品照片的右上角带有X。
我通常会使用绝对位置来实现这种浮动效果,但是考虑到这是为不同产品动态创建的元素,我需要某种相对于父元素进行样式设置的方式,因为我不需要知道每个产品卡的位置。我认为我不能使用绝对职位,因为每个产品卡的职位都不同。
有什么想法吗?
HTML
<div class="cart-card">
<span class="delete-button">
<i class="fas fa-times"></i>
</span>
<div class="cart-img-cont">
<img src="" alt="" class="cart-img" />
</div>
<p class="cart-card-product-name h-font">Product Name</p>
<div class="cart-card-price">
<p class="cart-price">$15.00</p>
<p class="cart-merchant">
<span class="cart-from">From</span> Merchant Name
</p>
</div>
<div class="cart-card-qty-cont"></div>
<div class="cart-opt-cont">
<p class="opt-name">Option:</p>
<select name="" id="" class="opt-select">
<option value="#">Option</option>
</select>
</div>
</div>
CSS
.cart-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;
padding-bottom: 10px;
}
.cart-img-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid $gray;
padding: 10px;
border-radius: 10px;
margin: 0px auto;
width: 100%;
height: 272px;
}
.delete-button {
background-color: $orange;
border-radius: 50%;
height: 36px;
width: 36px;
color: white;
text-align: center;
padding-top: 1.5px;
font-size: 28px;
position: absolute;
}
.cart-img {
height: 100%;
width: auto;
}
.cart-card-product-name {
font-size: 18px;
font-weight: 700;
margin: 5px 0;
}
.cart-card-price {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cart-price {
border-right: 1px solid $gray;
color: $orange;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-merchant {
color: $blue;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-from {
color: black;
font-weight: 600;
}
.cart-card-qty-cont {}
.cart-opt-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.opt-name {
padding-right: 10px;
font-size: 18px;
}
.opt-select {
width: 170px;
height: 45px;
border-radius: 5px;
border: 1px solid $gray;
padding: 5px;
font-size: 18px;
background: white;
}
赞:
解决方法
您是否正在寻找类似的东西?您可以根据需要修改以下内容:
.cart-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;
padding-bottom: 10px;
background: lightgrey;
}
.cart-img-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid $gray;
padding: 10px;
border-radius: 10px;
margin: 0px auto;
width: 100%;
height: 272px;
}
.delete-button {
background-color: $orange;
border-radius: 50%;
height: 36px;
width: 36px;
color: white;
text-align: center;
padding-top: 1.5px;
font-size: 28px;
position: absolute;
}
.cart-img {
height: 100%;
width: auto;
}
.cart-card-product-name {
font-size: 18px;
font-weight: 700;
margin: 5px 0;
}
.cart-card-price {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cart-price {
border-right: 1px solid $gray;
color: $orange;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-merchant {
color: $blue;
padding: 5px;
font-weight: 700;
font-size: 18px;
}
.cart-from {
color: black;
font-weight: 600;
}
.cart-card-qty-cont {}
.cart-opt-cont {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.opt-name {
padding-right: 10px;
font-size: 18px;
}
.opt-select {
width: 170px;
height: 45px;
border-radius: 5px;
border: 1px solid $gray;
padding: 5px;
font-size: 18px;
background: white;
}
.close {
position: absolute;
top: 0;
right: 0;
background: red;
color: white;
font-size: 24px;
border-radius: 50px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-family: cursive;
}
<div class="cart-card">
<span class="delete-button">
<i class="fas fa-times"></i>
</span>
<div class="cart-img-cont">
<img src="" alt="" class="cart-img" />
</div>
<p class="cart-card-product-name h-font">Product Name</p>
<div class="cart-card-price">
<p class="cart-price">$15.00</p>
<p class="cart-merchant">
<span class="cart-from">From</span> Merchant Name
</p>
</div>
<div class="cart-card-qty-cont"></div>
<div class="cart-opt-cont">
<p class="opt-name">Option:</p>
<select name="" id="" class="opt-select">
<option value="#">Option</option>
</select>
</div>
<div class="close">X</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。