Question

是否可以将元素绝对定位到其相对父级的底部，并保持其文本内容的流量从上到下？

这大致是我所说的布局---

array(4) {
    [0] = string(8) "site_url"
    [2] = string(9) "user_name"
    [4] = string(8) "password"
    [5] = string(10) "user_email"
}

---这里是小提琴：https://jsfiddle.net/x507Ljyh/

此外，我对任何创意解决方案都开放，例如伪元素等。请不要更改标记中的元素订单。

谢谢！

修改

我知道，<div class="relative" style="padding-bottom: 2em;"> <div style="position: absolute; bottom: 0;">Bottom! Can I have normal text flow, plz?</div> <div style="height: 10em;"></div> </div>位置的元素“不占用空间”而且没关系 - 灰色absolute元素因此而具有慷慨article。

我只需要padding-bottom元素文本从上到下流动，就像普通元素一样。因此，可怕的长标题“蜿蜒的轮子比螺丝和鞭绳的驱动器更能比绳索更能为你服务”最终会出现在灰色h1元素的底端（有时候，溢出到底部。）

对于花车来说，这是类似的问题：HTML float right element order

这有意义吗？

编辑2

Flexbox解决了我的问题，谢谢@RoToRa！但是我仍然感兴趣的是article元素的文本内容的流量可以以某种方式反转为正常，所以我将问题打开。

Answer 1

如果您只支持最新的浏览器，则可以使用flexbox布局，并更改元素的顺序：

article {
    display: flex;
    flex-direction: column;
}

article > h1 {
    order: 2;
}

article > blockquote {
    order: 1;
}

https://jsfiddle.net/8pqs49qf/

Answer 2

一旦你创造了一个元素＆＃34; position：absolute;＆＃34;生成页面时不再考虑其空间。这就是您的段落文本和标题文本重叠的原因。避免这种情况的最佳方法是在blockquote元素的底部添加填充，以使文章足够大以容纳标题所需的空间。

blockquote {
    padding-bottom: 100px;
}

此解决方案的问题是，如果您有多个不同大小的标头，它就不会非常动态。

位置绝对底部：不要更改文本流

修改

编辑2

2 个答案: