用css重新排序段落或其他元素

enyaitl3  于 2023-04-13  发布在  其他
关注(0)|答案(1)|浏览(115)

我有两个布局切换与媒体查询,我看到,图片占据右上角四分之一的我的主页会更好地在最后的网页,当在移动的上较小的布局。但我的html(markdown,但这并不重要)的figure元素位于第一位。所以我希望是绝对定位,除了它留在流中,没有叠加。好像我已经重新排序了元素。Javascript是禁止的,有没有一个简单的方法与css?谢谢。我现在唯一能想到的是复制元素和应用显示:一个或另一个都没有。

gkn4icbw

gkn4icbw1#

为了跟进tacosy的建议,下面是一个如何使用Flexbox或Grid的示例。
以HTML为例

<div class="container">
  <figure>
    <!-- Your image here -->
  </figure>
  <div class="content">
    <!-- Your other content here -->
  </div>
</div>

关于Flexbox

.container {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  figure {
    order: 1;
  }

  .content {
    order: 0;
  }
}

或者使用Grid

.container {
  display: grid;
  grid-template-areas:
    "figure"
    "content";
}

figure {
  grid-area: figure;
}

.content {
  grid-area: content;
}

@media (max-width: 767px) {
  .container {
    grid-template-areas:
      "content"
      "figure";
  }
}

相关问题