Question

我正在研究FrontLoops的一个简单项目。它是基本服务卡。该项目要求将卡片与本节的标题对齐。现在，我的文字描述推高了我的两个标题，因此所有三个标题都不对齐。

我一直在尝试使用flexbox对其进行整体对齐，但是到目前为止，我仍无法弄清楚哪些设置或设置组合可以使我按全部3个标题对齐。

有人可以指出我正确的方向吗？香港专业教育学院放置红色背景只是为了便于查看。

tldr，我希望所有3列均按标题对齐。 flexbox有可能吗？如果没有，有人可以指出我可以帮助我的资源吗？

/** Root Variables
 ---------------------------------------------------------*/
:root {
    --blue: rgb(85,114,214); /* title text and price */
    --grey: rgb(167,167,167); /* primary text */
    --light-grey: rgb(243,243,243); /* hover background */
    --white: rgb(255,255,255);
    --blue-grey: rgb(133,165,212); /* background */
}

/** Global Reset
 ---------------------------------------------------------*/
 * {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

body {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    background-color: var(--blue-grey);
    color: var(--white);
    line-height: 1.5;
    font-size: 1.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

/** Primary Price Compare
 ---------------------------------------------------------*/
.wrapper {
    height: 40rem;
    background-color: var(--white);
    border-radius: .5rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

 .card {
    background-color: var(--white);
    color: var(--blue);
    height: 35rem;
    width: 35rem;
    border-radius: .5rem;


    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


.card:hover {
    background-color: var(--light-grey);
}
.card_icon {
    padding-bottom: 1rem;
    background-color: red;
}

.card_icon-svg {
    height: 10rem;
    width: 7rem;
}

.card_title {
    font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: 4;
    font-weight: 600;

    background-color: red;

}

.card_description {
    padding: 0rem 5rem;
    text-align: center;
    color: var(--grey);
}

.card_fee-period {
    font-size: 2.25rem;
    font-weight: 500;
}

.card_fee-price {
    font-size: 4rem;
    font-weight: 700;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Front Loops 1-1</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    
    <div class="wrapper">
        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/device.svg" alt="Mobile">
            </div>
            <div class="card_title">Mobile</div>
            <div class="card_description">
                Get notifications about new releases in our mobile app.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$10</span> /month</div>
            </div>
        </div>

        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/laptop.svg" alt="Desktop">
            </div>
            <div class="card_title">Desktop</div>
            <div class="card_description">
                Enjoy new episodes on your laptop in browser with our web service, which supports all the plateforms.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$15</span> /month</div>
            </div>
        </div>

        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/monitor.svg" alt="TV">
            </div>
            <div class="card_title">TV</div>
            <div class="card_description">
                Watch your favorite series at home on large screen with our TV application.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$20</span> /month</div>
            </div>
        </div>

    </div>


    <!-- Custom JS -->
    <script src="js/scripts.js"></script>
</body>
</html>

柔性色谱柱的多重比对

0 个答案: