CSS之前在错误的地方

Question

我在div之前遇到了问题。我一开始就尝试定位它，但是它会转到另一边的父div的开头。我能做错什么？

HTML：

＆＃13;

＆＃13;

.cart-item.free-delivery-warn .left {
  width: 55%;
  height: 100%;
  display: inline-block;
}

.cart-item.free-delivery-warn .left p {
  text-align: right;
  background: linear-gradient(to right, #543a5c, #452f4b);
  color: #fff;
  padding: 10px 0;
  padding-right: 40px;
}

.cart-item.free-delivery-warn .right-content {
  width: 45%;
  height: 100%;
  float: right;
}

.cart-item.free-delivery-warn .right-content p {
  background: #bf2328;
  text-align: left;
  padding: 10px 0 13px 10px;
  font-weight: 500;
  color: #fff;
}

.right-content:before {
  position: absolute;
  bottom: 0;
  right: 100%;
  left: -12px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 12px 22px 0;
  border-color: transparent #bf2328 transparent transparent;
}

＆＃13;

<div class="cart-item free-delivery-warn">
  <div class="left">
    <p>Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
  </div>
  <div class="right-content">
    <p>Frete grátis&nbsp;&nbsp;<i class="fa fa-truck price-w"></i></p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以及它做错了什么：

Answer 1

每当您使用position: absolute并希望它相对于容器时，您需要将容器设置为position: relative。像这样：

＆＃13;

＆＃13;

.cart-item.free-delivery-warn .left {
  width: 55%;
  height: 100%;
  display: inline-block;
}

.cart-item.free-delivery-warn .left p {
  text-align: right;
  background: linear-gradient(to right, #543a5c,#452f4b);
  color: #fff;
  padding: 10px 0;
  padding-right: 40px;
}

.cart-item.free-delivery-warn .right-content {  
  width: 45%;
  height: 100%;
  float: right;
}

.cart-item.free-delivery-warn .right-content p {
  background: #bf2328;
  text-align: left;
  padding: 10px 0 13px 10px;
  font-weight: 500;
  color: #fff;
}

.right-content {
  position: relative;
}

.right-content:before {
  position: absolute;
  bottom: 0;
  right: 100%;
  left: -12px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 12px 22px 0;
  border-color: transparent #bf2328 transparent transparent;
}

＆＃13;

<div class="cart-item free-delivery-warn">
  <div class="left">
    <p >Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
  </div>
  <div class="right-content">
    <p>Frete grátis&nbsp;&nbsp;<i class="fa fa-truck price-w"></i></p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你离这么近，但是你在父母身上错过了position: relative。

请注意margin会使其不对齐。

试试这个：

＆＃13;

＆＃13;

body {
  box-sizing: border-box;
}

p {
  margin: 0;
}

.cart-item.free-delivery-warn .left {
  width: 55%;
  height: 100%;
  display: inline-block;
}

.cart-item.free-delivery-warn .left p {
  text-align: right;
  background: linear-gradient(to right, #543a5c, #452f4b);
  color: #fff;
  padding: 10px 0;
  padding-right: 40px;
}

.cart-item.free-delivery-warn .right-content {
  width: 45%;
  height: 100%;
  float: right;
  position: relative;
}

.cart-item.free-delivery-warn .right-content p {
  background: #bf2328;
  text-align: left;
  padding: 10px 0 13px 10px;
  font-weight: 500;
  color: #fff;
}

.right-content:before {
  position: absolute;
  bottom: 0;
  right: 100%;
  left: -12px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 12px 22px 0;
  border-color: transparent #bf2328 transparent transparent;
}

＆＃13;

<div class="cart-item free-delivery-warn">
  <div class="left">
    <p>Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
  </div>
  <div class="right-content">
    <p>Frete grátis&nbsp;&nbsp;<i class="fa fa-truck price-w"></i></p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;