html - 如何在不影响任何其他元素的情况下使 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>
推荐阅读
- javascript - 使用异步函数调用在网格中渲染列
- reactjs - 使用 AsyncCreatableSelect 时如何解决 selectOptions.some 不是函数?
- spring - 我应该如何将我的密码从 AWS Secret Manager 提取到 spring?
- python - Python Scikit - 调用 sklearn.metrics.precision_recall_curve 时输入形状错误
- java - 在java中执行“搜索”的Odoo问题
- python - Spacy:替换现有实体的新词
- python - Pandas 通过对两列中的一些列进行分组并保持其他列完整来进行多索引
- c# - 如何计算任意范围内的价值百分比?
- html - 无论大小如何,在 Safari 中的输入中垂直居中文本
- android - android 的 Maven 依赖被删除了?