首頁(yè) 猿問 CSS div 未放置在父級(jí)的右側(cè)

CSS div 未放置在父級(jí)的右側(cè)

Html5

翻翻過去那場(chǎng)雪 2023-10-10 16:44:55

正如標(biāo)題所說(shuō)，我想將一個(gè) div 放在另一個(gè) div 中。然而，當(dāng)將它放在右側(cè)時(shí)，它完全忽略它的父級(jí)。.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 的放置方式（除了它應(yīng)該位于右側(cè)）。應(yīng)該是這樣的，但是在右側(cè)當(dāng)將 div 放在右側(cè)（通過 float: right;）和我嘗試過的其他一些方法時(shí)，它似乎位于父 div 之外，并忽略了它到側(cè)面底部的給定距離。右側(cè)的div

查看完整描述

3 回答

largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

}

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

<button class="cart-checkout-button">Checkout</button>

</div>

反對(duì) 回復(fù) 2023-10-10

萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

首先，你必須刪除 justify-self: flex-end;，因?yàn)槟銢]有使用 flexbox ，第二件事是將卡片包裹在另一個(gè) div 標(biāo)簽中，這個(gè) div 將占據(jù) 100% 的寬度，現(xiàn)在你可以添加到flaot: right;.cart-price 。

html 文件：

<div>

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

<button class="cart-checkout-button">Checkout</button>

</div>

并且 css 文件應(yīng)該是這樣的：

.cart-price {

/*make button decrease size into its center*/

text-align: center;

width: fit-content;

/* justify-self: flex-end; */

float: right;

}

反對(duì) 回復(fù) 2023-10-10

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

所以我就把它修好了。我重寫了整個(gè)內(nèi)容以使用 flexbox 并添加justify-content: right;到.cart ，所以現(xiàn)在 .cart 固定在頁(yè)面中間，但內(nèi)容位于右側(cè)。這對(duì)于 .cart 部分中的其他所有內(nèi)容來(lái)說(shuō)都沒有問題，但按鈕現(xiàn)在位于右側(cè)。

反對(duì) 回復(fù) 2023-10-10