仅使用 CSS 移动 DIV

Question

我需要将一个 DIV 元素移动到正文的底部，但我无法修改 HTML 结构。我认为一些现有的线程可以帮助我，因为他们准确地解释了我在寻找什么，但它似乎不适用于我的情况：Moving a div from bottom to top, using only css。我可能遗漏了什么。

这是我的页面：https://www.tr-architecte.fr/page-220-auriples-drome

<section>
  <article class="container-fluid">
    <div class="row">...</div>
    <div class="txt">...</div>
    <div class="gallery">...</div>
  </article>
</section>

相关元素是DIV.txt。我希望将它放在 div.gallery 之后，但不能手动操作，因为照片库会在底部自动生成。不过我可以修改类和样式。

如果您需要更多信息，请告诉我。

Answer 1

Flexbox 可以做到这一点：

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

.container-fluid * {
  order: 1;
}

.txt {
  order: 2;
}

<section>
  <article class="container-fluid">
    <div class="row">1. Row</div>
    <div class="txt">2. Text</div>
    <div class="gallery">3. Gallery</div>
  </article>
</section>

Answer 2

如果你不能改变它粗糙的 html 结构，我会有一个解决方案。

不是最好的，我不推荐它，但它就是这样：

position: absolute;

这发生在 div 上，类 .row 包含您的文本。在绝对位置之后，您必须使用bottom: - something px 和left: something px。然后你用 id: social 进入你的 div 并生成一些padding-top: something px。

我用来测试的是：

这个在.row

position: absolute;
left: 450px;
bottom: -535px;

这是#social

padding-top: 200px;

正如我所说，这是一种不好的做法，我不建议这样做，但由于您无权访问 html，因此这是您的选择。