CSS单行文本时内容对齐异常问题求助

问题说明 #

编写的代码整体运行正常，但当浏览器宽度足够使文本仅显示一行时，帖子会出现日期栏与内容区不对齐的错位情况。尝试多种CSS调整后仍无法解决，寻求修复方法。

问题根源 #

当前布局使用固定值的负margin（margin-top: -75px）强行调整内容区位置，这种方式依赖内容的固定高度，当内容高度变化（如标题仅显示一行）时，就会破坏对齐关系；同时日期区与内容区未采用稳定的垂直对齐布局方案，导致错位。

修复方案 #

利用Bootstrap 4的Flexbox网格特性，重构布局逻辑，去掉不稳定的负margin，通过Flex布局实现日期区与内容区的稳定对齐：

修改后的CSS

/*Feed*/
 
.feed-row {
  padding-bottom: 40px;
  padding-right: 20px;
  align-items: flex-start; /* 让日期区和内容区顶部对齐 */
}

.feed-mt .post-submitted-info {  
  font-weight: 700; 
  text-align: center; 
  line-height: 1; 
  position: relative; 
  width: 65px; /* 固定日期区宽度，替代不稳定的column-width */
}

.post-submitted-info { 
  margin-left: 10px;
}

.submitted-date { 
  border-right: 1px solid #c2c2c2; 
  padding-right: 10px; /* 让日期内容与右侧边框保持间距 */
}

.submitted-date { 
  margin-top: 12px; 
}

.post-submitted-info .year { 
  padding-bottom: 8px 
}

.post-submitted-info .month, .post-submitted-info .year {  
  font-size: 14px; 
  text-transform: uppercase; 
}

.feed-mt .post-submitted-info .day { 
  font-size: 29px; 
  font-weight: 900; 
  padding-bottom: 2px; 
}

.feed-main-content {
  padding-left: 20px; /* 用内边距设置内容区与日期区的间距，替代负margin */
  flex: 1; /* 让内容区自动填充剩余宽度 */
}

.field-item{  
  font-weight: normal;
  border-bottom: 1px solid #acacac;
  padding-bottom: 15px; /* 让底部边框与内容保持合理间距 */
}

修改后的HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/handlebars@4.5.0/dist/handlebars.min.js"></script>

<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>
<body>
  <div id="hf">
    <script id="hf-template" type="text/x-handlebars-template">

<!-- Post Date Section -->
      <div class="row feed-row feed-mt">
        <div class="post-submitted-info">
            <div class="submitted-date">
            <div class="month">{{cells.Month}}</div>
            <div class="day">{{cells.Day}}</div>
            <div class="year">{{cells.Year}}</div>         
            </div>
        </div>
        
<!-- Post Content Section -->
        <div class="feed-main-content">
            <div class="header">
            <h2>{{cells.Header}}</h2>
          </div>
            <div class="field-item">
            <p>{{cells.Content}}</p>
            </div>
        </div>
      </div>
    </script>
  </div>
</body>

关键改动说明 #

1. 给.feed-row添加align-items: flex-start，确保日期区和内容区始终顶部对齐，不受内容高度变化影响；
2. 移除.feed-main-content的margin-top: -75px，改用padding-left: 20px设置内容区与日期区的间距，避免布局偏移；
3. 给.post-submitted-info设置固定宽度width: 65px，替代不稳定的column-width，确保日期区宽度一致；
4. 给.submitted-date添加padding-right: 10px，优化日期内容与右侧边框的视觉间距；
5. 给.field-item添加padding-bottom: 15px，让底部边框与内容保持合理间距，提升视觉舒适度。

内容的提问来源于stack exchange，提问作者Ben H.