如何在响应式网站中添加保证金

Question

在这个网站上我有两个街区。我希望在第二个div上添加margin-top，就好当这个div在中等设备上移动到第一个div时。

我的问题是错过了大型设备顶部的对齐方式。

我使用了fundation.css

<div class="row"> 
    <div class="medium-12 large-3 columns">
        bla bla
    </div>
    <div class="medium-12 large-9 columns" >
        bla bla
    </div>
</div>

---

Answer 1

如果您使用移动优先方法，则只能使用媒体查询

<div class="row"> 
    <div class="medium-12 large-3 columns">
        bla bla
    </div>
    <div class="medium-12 large-9 columns marginDiv" >
        bla bla
    </div>
</div>

@media screen and (min-width: 760px) {

     .marginDiv{ 
         margin-top: 10px;
     }

}

Answer 2

您需要为此编写媒体查询：

@media only screen and (min-width: 1280px) {

     .row > div:nth-child(2){ 
         margin-top: 1em;
     }

}

Answer 3

使用以下百分比 （％） lyk的单位在css中应用保证金，

{ margin-top:2%;}