如何实现损益表Div在中等宽度下三元素垂直排列的响应式布局？

问题描述 #

需要实现包含三个元素的损益表div：

• 默认状态下三个元素水平排列
• 中等宽度及以下设备直接切换为垂直排列
• 禁止出现两元素水平、一元素换行的中间状态

用户尝试的代码如下：

原CSS代码 #

#results-1 {
  width: 100%;
  gap: 1rem;
  padding: -10px -10px 0.7rem 1.8rem; /* 无效：padding不能为负值 */
}

#results-2 {
  gap: 3.5rem;
  font-weight: bold;
  font-size: 1.5em;
  margin-right: 29px;
  padding-right: -20px; /* 无效：padding不能为负值 */
  text-decoration: underline 5px;
}

原HTML代码 #

<div className=' d-flex flex-column' id='results-1'>
  <div className=" d-flex justify-center" id="results-2">
    <span id="emp" className='col-10 col-sm-4 col-md-4 col-lg-4'> +10,000 Supported Companies </span>
    <span id='paiat' className='col-10 col-sm-4 col-md-4 col-lg-4'>+14 Countries Served </span>
    <span id='money' className='col-10 col-sm-4 col-md-4 col-lg-4'>+250 Million Managed </span>
  </div>
</div>

问题分析 #

1. 错误使用负padding：CSS中padding属性不能设置负值，这类代码完全无效
2. 栅格类（col-*）与flex布局冲突：栅格类会自动分配宽度，容易导致元素在断点处换行，出现禁止的中间状态
3. 未设置明确的断点切换逻辑：没有在中等宽度时强制切换flex方向，无法精准控制布局变化

解决方案 #

修正后的代码 #

HTML（基于Bootstrap）

<div id='results-1'>
  <div class="d-flex flex-row justify-center" id="results-2">
    <span id="emp">+10,000 Supported Companies</span>
    <span id='paiat'>+14 Countries Served</span>
    <span id='money'>+250 Million Managed</span>
  </div>
</div>

CSS

#results-1 {
  width: 100%;
  padding: 0.7rem 1.8rem; /* 替换无效的负padding */
}

#results-2 {
  gap: 3.5rem;
  font-weight: bold;
  font-size: 1.5em;
  text-decoration: underline 5px;
  flex-wrap: nowrap; /* 强制不换行，彻底避免中间状态 */
}

/* 中等宽度及以下（以Bootstrap md断点768px为例）切换为垂直排列 */
@media (max-width: 768px) {
  #results-2 {
    flex-direction: column;
    align-items: center; /* 保持垂直排列时内容居中 */
    gap: 1.5rem; /* 垂直排列时调整间距更合理 */
  }
  
  #results-2 span {
    text-align: center; /* 垂直排列时文本居中 */
  }
}

关键说明 #

• 使用flex-wrap: nowrap强制三个元素始终在一行（水平状态下），彻底杜绝换行的中间状态
• 通过媒体查询@media (max-width: 768px)明确在中等宽度及以下切换为垂直布局
• 移除冲突的栅格类，用flex布局直接控制元素排列方式
• 修正无效的负padding，改用合理的padding调整内边距

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