Question

对于小屏幕，我想以不同的方式堆叠div，并且我想使用css。

我要实现的目标是：

对于一页，div class="three必须在.header下
对于另一页（使用相同的代码），div class="two"必须高于.header

我只设法使.two高于.header，但结果是我无法使.three低于另一页上的.header（实际结果是由于我的.three代码，.header也被放置在css上方）。如何解决？

@media(max-width: 460px) {
    .container {
        display: flex;
        flex-direction: column;
    }

    .header {
        order: 2;
    }
}

<div class="body">
    <div class='container'>
        <div class='header'>
            <div class="one">
                one
            </div>
            hello
        </div>
        <div class='sidebar'>
            <div class="two">
                two
            </div>
            <div class="three">
                three
            </div>
        </div>
    </div>
</div>

Answer 1

您的two和three在称为sidebar的div中在之内。您无法将它们从该div中删除，而无法使用CSS通过header对它们进行排序，因为header与它们的级别不同。您可能应该考虑重新构造HTML？

我已经稍微修改了您的示例以说明我的意思。

.container {
  display: flex;
  flex-direction: column;
}

.header {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}

<div class="body">
  <div class='container'>
    <div class='header'>
      <div class="one">
        one
      </div>
      hello
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>

Answer 2

您想要的东西很棘手，因为您的HTML将第二和第三项分组。

最好的解决方案是重新排列HTML。

即使在不可能的情况下，也可以使用display：边栏元素上的内容设置解决方法（这会使元素从流程中消失）

  ...
  withCredentials([file(credentialsId: 'key-sa', variable: 'GC_KEY')]) {
               sh("gcloud auth activate-service-account --key-file=${GC_KEY}")
               sh("gcloud container clusters get-credentials <cluster_name> --zone northamerica-northeast1-a --project <project_id>")
               sh 'mvn test'
   }
   ...

@media(max-width: 4600px) {
    .container {
        display: flex;
        flex-direction: column;
        background-color: lightblue;
    }

    .header {
        order: 2;
    }
    .three {
        order: 3;
    }
    .sidebar {
        display: contents;
    }
}

重新定位不同的div

2 个答案: