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 {&nbsp; /* Distance to the items in the cart and the Checkout button*/&nbsp; padding-top: 1rem;&nbsp; padding-left: 1rem;&nbsp; padding-right: 1rem;&nbsp; /*Restrict size*/&nbsp; width: fit-content;&nbsp; height: fit-content;&nbsp; /*Center of the page*/&nbsp; margin: 0 auto;&nbsp; /*distance to bottom of page*/&nbsp; margin-bottom: 2rem;&nbsp; /*Debugging*/&nbsp; background-color: yellow;&nbsp; position: relative;}.cart-price {&nbsp; &nbsp;display: flex;&nbsp; &nbsp;flex-direction: column;&nbsp; &nbsp;align-items: flex-end;}/* Display of total price*/.cart-price-summary {&nbsp; /*TODO style text*/}.cart-checkout-button {&nbsp; /*style*/&nbsp; background-color: #2B2E32;&nbsp; color: #FFFFFF;&nbsp; height: 2.5em;&nbsp; padding-right: 1em;&nbsp; padding-left: 1em;&nbsp; font-family: "Palatino Regular";&nbsp; font-size: 1em;&nbsp; /*remove white border*/&nbsp; border: 0px;&nbsp; margin-top: 1rem;}<div class="cart-price">&nbsp; <b class="cart-price-summary">Total: € 194.50</b><br>&nbsp; <button class="cart-checkout-button">Checkout</button></div>

Answer 2

首先，你必须删除 justify-self: flex-end;，因为你没有使用 flexbox ，第二件事是将卡片包裹在另一个 div 标签中，这个 div 将占据 100% 的宽度，现在你可以添加到flaot: right;.cart-price 。html 文件：<div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="cart-price">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b class="cart-price-summary">Total: € 194.50</b><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="cart-checkout-button">Checkout</button>&nbsp; &nbsp; &nbsp; &nbsp; </div></div>并且 css 文件应该是这样的：.cart-price {&nbsp; &nbsp; /*make button decrease size into its center*/&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; width: fit-content;&nbsp; &nbsp; /* justify-self: flex-end; */&nbsp; &nbsp; float: right;&nbsp; }

Answer 3

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