#html #css #reactjs #flexbox #react-css-modules
#HTML #CSS #реагирует на #flexbox #react-css-модули
Вопрос:
Поэтому я чувствую, что перепробовал все, чтобы эта кнопка переместилась в нижнюю часть div, но, похоже, ничего не работает. Если я переключу div контейнера на align-content: flex-end, все переместится вниз, как и должно быть, но я пытаюсь сохранить divs вверху и только нажимаю кнопку. Я использую модули React и CSS.
import styles from './Total.module.css'; const Total = ({ tipTotal, total, handleReset }) =gt; { return ( lt;div className={styles.total}gt; lt;div className={styles.totalTipAmount}gt; lt;div className={styles.totalLeft}gt; lt;div className={styles.totalTop}gt;Tip Amountlt;/divgt; lt;div className={styles.totalBottom}gt;/ personlt;/divgt; lt;/divgt; lt;div className={styles.totalRight}gt;${tipTotal}lt;/divgt; lt;/divgt; lt;div className={styles.toalAmount}gt; lt;div className={styles.totalLeft}gt; lt;div className={styles.totalTop}gt;Totallt;/divgt; lt;div className={styles.totalBottom}gt;/ personlt;/divgt; lt;/divgt; lt;div className={styles.totalRight}gt;${total}lt;/divgt; lt;/divgt; lt;button className={styles.totalReset} onClick={handleReset}gt; RESET lt;/buttongt; lt;/divgt; ); }; export default Total; .total { display: flex; align-self: center; flex-direction: column; width: 80%; min-width: 80%; margin: 30px 0; background-color: var(--Very-dark-cyan); border-radius: 15px; padding: 30px 15px 5px 15px; } .total div { display: flex; justify-content: space-between; margin-bottom: 10px; justify-self: flex-start; } .totalLeft { display: flex; flex-direction: column; } .totalTop { color: var(--White); font-size: medium; margin-bottom: 5px !important; } .totalBottom { font-size: small; color: var(--Dark-blueish-cyan); } .totalRight { font-size: xx-large; color: var(--Strong-cyan); } .total button { background-color: var(--Strong-cyan); color: var(--Very-dark-cyan); font-size: large; font-weight: 700; width: 100%; max-width: 100%; } @media (min-width: 900px) { .total { height: 100%; grid-column-start: 2; grid-row-start: 1; grid-row-end: 4; justify-self: center; } .total button { align-self: flex-end; } } Ответ №1:
удалить ширину:100% из css тега кнопки
Ответ №2:
.total { height: 100%; grid-column-start: 2; grid-row-start: 1; grid-row-end: 4; justify-self: center; position:relative; } .total button { align-self: flex-end; position: absolute; right: 20px; } Ответ №3:
body, html { height: 100%; } .total { display: flex; flex-direction: column; width: 80%; min-width: 80%; margin: 30px 0; background-color: var(--Very-dark-cyan); border-radius: 15px; padding: 30px 15px 5px 15px; height: 80%; border: 1px solid red; justify-content: space-between; } .totalTipAmount, .totalAmount { display: flex; justify-content: space-between; margin-bottom: 10px; } .totalLeft { display: flex; flex-direction: column; } .totalTop { color: var(--White); font-size: medium; margin-bottom: 5px !important; } .totalBottom { font-size: small; color: var(--Dark-blueish-cyan); } .totalRight { font-size: xx-large; color: var(--Strong-cyan); } .totalReset { justify-self: flex-end; border: 1px solid blue; } .total button { background-color: var(--Strong-cyan); color: var(--Very-dark-cyan); font-size: large; font-weight: 700; width: 100%; max-width: 100%; } @media (min-width: 900px) { .total { height: 100%; grid-column-start: 2; grid-row-start: 1; grid-row-end: 4; justify-self: center; } .total button { align-self: flex-end; } } lt;div class="total"gt; lt;div class="stuffAtTheTop"gt; lt;div class="totalTipAmount"gt; lt;div class="totalLeft"gt; lt;div class="totalTop"gt;Tip Amountlt;/divgt; lt;div class="totalBottom"}gt;/ personlt;/divgt; lt;/divgt; lt;div class="totalRight"gt;${tipTotal}lt;/divgt; lt;/divgt; lt;div class="totalAmount"gt; lt;div class="totalLeft"gt; lt;div class="totalTop"gt;Totallt;/divgt; lt;div class="totalBottom"gt;/ personlt;/divgt; lt;/divgt; lt;div class="totalRight"gt;${total}lt;/divgt; lt;/divgt; lt;/divgt; lt;button class="totalReset"gt; RESET lt;/buttongt; lt;/divgt; lt;/divgt;