CSS div не находится справа от родителя - PullRequest
Новая
       13

CSS div не находится справа от родителя

0 голосов
/ 26 марта 2020

Как видно из названия, я хочу разместить 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 и игнорируя его заданное расстояние до нижней части стороны. Див на правой стороне

Ответы [ 3 ]

3 голосов
/ 18 апреля 2020 

.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>
0 голосов
/ 27 марта 2020

Так что я просто исправил это. я переписал все это, чтобы использовать flexbox, и добавил justify-content: right; в .cart, так что теперь .cart зафиксирована в середине страницы, но содержимое находится на правой стороне. что не является проблемой для всего остального в разделе .cart, но кнопка теперь находится справа.

0 голосов
/ 27 марта 2020

во-первых, вам нужно удалить 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;
  }
...