如何使中间div高于第一和第二

Question

我有3个div，我希望中间div高于其他两个div。

我尝试在第二个div中使用top：-50，但这没有用。

(button / text)

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}

Answer 1

您正在使用flexbox！不要靠边距。

codepen：https://codepen.io/nstanard/pen/gqYrjZ

    .cards {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        height: 350px;
        justify-content: bottom;
        align-items: flex-end;
    }

    .card {
        flex: 0 0 31%;
        margin: 0 10px;
        height: 300px;
        background-color: red;
    }

    .card:nth-child(2) {
        align-self: flex-start;
    }

    @media only screen and (max-width: 460px) {
        .card {
            flex: 0 0 48%;
        }
    }

    @media only screen and (max-width: 360px) {
        .card {
            flex: 0 0 100%;
        }
    }

<div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

摘要：

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    height: 350px;
    align-items: center;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}
.card:nth-child(2) {
    align-self: flex-start;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}

    <div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

Answer 2

第二个div使用margin-top，margin-bottom为-50px，它将起作用...

因此请使用此类

.card:nth-child(2){
  margin:-50px 0;
}

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top:60px;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}

.card:nth-child(2){
  margin:-50px 0;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}

<div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>