Question

我的代码如下所示：

xyz.html

<div class='main-container'>
    <div class="q-background">
    </div>
    <div class="q-text">
        <div>Order History</div>
    </div>

    <div class ="q-orders">
    </div>
</div>

xyz.scss

.main-container {
    height: 100vh;
    width: 100vw;
    margin-top: -4rem;
    .q-background {
        float: left;
        width: 100%;
        height: 14.3vw;
        background: url("../../image/i-header-list.jpg") no-repeat;
        background-size: contain;
    }
    .q-text {
        position: relative;
        margin-top: 1rem;
        font-size: 2rem;
        text-align: center;
    }
    .q-orders {
        position: relative;
        margin-left: 2rem;
        float: left;
        height: 50%;
        width: 50%;
        background-color: #ff3;
    }
}

现在发生的事情是 margin-top：1rem 即使在定义position：relative之后也不适用于 q-text 。那还有什么缺失吗？

Answer 1

margin-top正在使用.q-text，但您在父{a} margin-top:-4rem上设置了margin。您应该避免.main-container { height: 100vh; width: 100vw; } .main-container .q-background { float: left; width: 100%; height: 14.3vw; background: url("../../image/i-header-list.jpg") no-repeat; background-size: contain; } .main-container .q-text { position: relative; margin-top: 1rem; font-size: 2rem; text-align: center; top:0; } .main-container .q-orders { position: relative; margin-left: 2rem; float: left; height: 50%; width: 50%; background-color: #ff3; }上的负值。

＆＃13;

<div class='main-container'>
    <div class="q-background">
    </div>
    <div class="q-text">
        <div>Order History</div>
    </div>

    <div class ="q-orders">
    </div>
</div>

＆＃13;

id | username      | friend
----------------------------------
1  | kayover       | random_user
2  | random_user   | kayover
3  | random_user   | random_user_3
4  | kayover       | random_user_2
5  | random_user_2 | random_user_3

＆＃13;

为什么保证金不适用于甚至用相对位置定义的组件

1 个答案: