CSS解决div垂直堆叠重叠及datetime右对齐问题咨询

1. 多个content-box重叠问题 #

重叠完全是定位属性设置错误导致的：

• 你给所有.content-box设置了position: absolute和固定值top: 600px，绝对定位的元素会脱离正常文档流，不再占据页面排版位置，所有元素都会以最近的已定位祖先元素为基准，定位到距顶部600px的同一位置，必然出现重叠。
• 原有代码里的justify-content: center没有生效，因为该属性只对flex/grid容器生效，普通块级元素不识别；另外重复写了两次padding属性，后写的padding: 60px会覆盖前一次的padding: 20px 40px，可以删掉冗余的那行。

修复方法 #

按以下步骤修改.content-box样式即可实现垂直自动堆叠：

.content-box {
    /* 删掉 position: absolute; 和 top: 600px; */
    position: relative; /* 新增，给内部:after伪元素提供定位基准 */
    width: 75%;
    margin: 0 auto; /* 替换原来无效的justify-content，实现水平居中 */
    border: none;
    outline: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 18px;
    transform: translate(0);
    background-image: linear-gradient(45deg, #4568DC, #B06AB3);
    padding: 60px; /* 删掉重复的padding定义，保留你需要的内边距值即可 */
    border-radius: 5px;
    box-shadow: 0 22px 44px rgba(128, 128, 128, 0.1);
    transition: box-shadow .25s;
    margin-bottom: 20px; /* 可选，给多个卡片之间加垂直间距，避免贴在一起 */
}

如果需要整个卡片组距离页面顶部600px，给包裹所有content-box的父容器加padding-top: 600px，或者给第一个content-box加margin-top: 600px即可，不需要给每个卡片设绝对定位。

2. datetime右对齐优化 #

写死padding-left: 1140px的方式适配性极差，屏幕宽度变化时就会出现错位，不需要算固定像素，两种简单方案可以实现：

方案1（零改动HTML，成本最低） #

直接给.datetime设置右浮动，删掉固定左内边距：

.content-box .datetime {
    float: right; /* 替换padding-left: 1140px */
    color: black;
    font-size: 18px;
}

原有代码里datetime后面的<br><br>会自动清除浮动影响，不会打乱后续content文本的排版。

方案2（布局更稳定，推荐长期使用） #

把姓名和日期所在的头部区域改成flex两端对齐布局，只需要微调HTML结构，把同一行的两个span包在一个头部容器里：

<div class="content-box">
  <div class="box-header">
    <span class="name">John Doe</span>
    <span class="datetime">May 2022</span>
  </div>
  <br><br>
  <span class="content">Lorem ipsum</span>
</div>

对应新增少量CSS：

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content-box .datetime {
    /* 删掉padding-left: 1140px */
    color: black;
    font-size: 18px;
}

这种方式不管容器宽度怎么变，日期都会自动贴在右侧，适配所有屏幕尺寸。

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