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 的放置方式（除了它应该位于右侧）。 应该是这样的，但是在右侧当将 div 放在右侧（通过 float: right;）和我尝试过的其他一些方法时，它似乎位于父 div 之外，并忽略了它到侧面底部的给定距离。右侧的div

Answer 1

.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 {

   display: flex;

   flex-direction: column;

   align-items: 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;

  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>

Answer 2

首先，你必须删除 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;

  }

Answer 3

所以我就把它修好了。我重写了整个内容以使用 flexbox 并添加justify-content: right;到.cart ，所以现在 .cart 固定在页面中间，但内容位于右侧。这对于 .cart 部分中的其他所有内容来说都没有问题，但按钮现在位于右侧。