如何仿Facebook/WordPress在帖子或盒子下方/右下角显示时间日期

没问题！要实现你想要的效果，我们可以通过CSS布局属性来调整时间的位置，下面分两种常见场景给你修改方案：

1. 让时间显示在div的右下角（同一容器内） #

这种方式适合把时间和帖子内容放在同一个盒子里，贴在右下角。我们可以用绝对定位或者Flex布局来实现：

方案一：绝对定位法 #

给外层div设置相对定位作为参考，再把时间放在单独的元素里固定到右下角：

<html>
<body>
<div style="height: auto; width: 500px; color: gray; background-color: #ffffff; position: relative; padding: 10px;">
    <p>hello, welcome to the first post of my blog!</p>
    <span style="position: absolute; bottom: 5px; right: 10px; font-size: 12px; color: #666;">
        <?php echo $now->format("m-d-Y H:i:s.u"); ?>
    </span>
</div>
</body>
</html>

• 把原div的height:30px改成auto，避免内容溢出；
• 加了padding让内容不贴边，更美观；
• 时间用absolute定位，通过bottom和right调整与容器边缘的距离，缩小字体并调暗颜色，和主内容区分开。

方案二：Flex布局法 #

用Flex垂直排列内容，让时间自动靠右对齐：

<html>
<body>
<div style="width: 500px; color: gray; background-color: #ffffff; padding: 10px; display: flex; flex-direction: column; gap: 8px;">
    <p>hello, welcome to the first post of my blog!</p>
    <span style="align-self: flex-end; font-size: 12px; color: #666;">
        <?php echo $now->format("m-d-Y H:i:s.u"); ?>
    </span>
</div>
</body>
</html>

• display:flex和flex-direction:column让内部元素垂直排列；
• align-self:flex-end让时间元素单独靠右，布局更灵活。

2. 让时间显示在div的下方（单独一行） #

如果想把时间放在整个帖子盒子的外面，单独占一行，可以把时间元素移到div外，再控制对齐：

<html>
<body>
<div style="width: 500px; color: gray; background-color: #ffffff; padding: 10px;">
    <p>hello, welcome to the first post of my blog!</p>
</div>
<p style="width: 500px; text-align: right; color: #666; font-size: 12px; margin-top: 5px; margin-bottom: 0;">
    <?php echo $now->format("m-d-Y H:i:s.u"); ?>
</p>
</body>
</html>

• 时间元素和div同级，设置和div相同的宽度，用text-align:right让它靠右；
• 加margin-top营造和帖子盒子的间距，调整字体样式保持视觉统一。

内容的提问来源于stack exchange，提问作者amit