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

如果您无法更改html结构，那么我会提供解决方案。

不是最好的，我不建议这样做，但是它就行了：

position: absolute;

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

我用来测试的是：

.row上的

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

关于#social

padding-top: 200px;

就像我说的那样，这是一种不好的做法，我不建议这样做，但是由于您没有访问html的权限，因此是您的选择。

Answer 2

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>

仅使用CSS移动DIV

2 个答案: