CSS div不在父母的右边

Question

如标题所述，我想在另一个div内放置一个div。但是，当将其放在右侧时，它将完全忽略其父项。

.cart {
  /* Distance to the items in the cart and the Checkout button*/
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  /*Restrict size*/
  width: fit-content;
  height: fit-content;
  /*Center of the page*/
  margin: 0 auto;
  /*distance to bottom of page*/
  margin-bottom: 2rem;
  /*Debugging*/
  background-color: yellow;
  position: relative;
}

.cart-price {
  /*make button decrease size into its center*/
  text-align: center;
  width: fit-content;
  justify-self: flex-end;
}


/* Display of total price*/

.cart-price-summary {
  /*TODO style text*/
}

.cart-checkout-button {
  /*style*/
  background-color: #2B2E32;
  color: #FFFFFF;
  height: 2.5em;
  padding-right: 1em;
  padding-left: 1em;
  font-family: "Palatino Regular";
  font-size: 1em;
  /*remove white border*/
  border: 0px;
  width: 100%;
  margin-top: 1rem;
}

<div class="cart-price">
  <b class="cart-price-summary">Total: € 194.50</b><br>
  <button class="cart-checkout-button">Checkout</button>
</div>

这是div的放置方式（除了它应该在右侧）。It should be like this but on the right side

[当将div放在右侧时（通过float：right;）和我尝试过的其他几种方法，它似乎位于父div的外部，而忽略了它到该侧底部的给定距离。 The div on the right side

Answer 1

首先，您必须删除justify-self: flex-end;，因为您没有使用flexbox，第二件事是将卡包裹在另一个div标签中，该div将占用宽度的100％，现在您可以将flaot: right;添加到.cart-price。

html文件：

<div>
        <div class="cart-price">
            <b class="cart-price-summary">Total: € 194.50</b><br>
            <button class="cart-checkout-button">Checkout</button>
        </div>
</div>

并且css文件应类似于：

.cart-price {
    /*make button decrease size into its center*/
    text-align: center;
    width: fit-content;
    /* justify-self: flex-end; */
    float: right;
  }