如何用CSS Flexbox实现两文本框桌面端并排并限制总宽度

问题说明 #

我用CSS Flexbox实现了两个文本框，左侧为标语、右侧为简介，需求如下：

• 桌面端（最小宽度1024px）：两框居中并排，总宽度不超过页面的50%
• 平板/手机端（小于1024px）：两框自动堆叠
  目前遇到的问题是屏幕扩大时，文本会撑满屏幕，尝试多种方法均无效。

原HTML代码 #

<div class="info-block">
    <div class="info-item">
        <div class="info-col">
            <h4>Modern Approach, Innovative Solutions, Accessible Support</h4>
        </div>
        <div class="info-col">
            <div class="info-text">We approach problems with holistic and practical solutions, each and every time.</div>
        </div>
    </div>
</div>

原CSS代码 #

.info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0; 
}
.info-item:last-child {margin: 0;}
.info-col {
    width: 46.6%;
    font-size: 24px; 
}
.info-col:first-child {
  text-align: right;
}
.info-text {
    margin: 0 0 20px;
    font-size: 24px; 
    line-height: 115%; 
    font-weight: 200; 
}

@media screen and (min-width: 1900px) {
    .info-text {
        margin-right: 200px;
        max-width: 420px; 
        margin-top: 5px;
    }
  .info-col {
      max-width: 420px; 
  }
}

目标效果 #

修复方案 #

核心问题是未给外层容器设置宽度限制和居中规则，同时媒体查询的范围逻辑需要调整，以下是完整修复后的CSS：

/* 外层容器：限制总宽度为页面50%并水平居中 */
.info-block {
  max-width: 50%;
  margin: 0 auto;
}

.info-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
}

.info-item:last-child {margin: 0;}

/* 基础列样式：设置最大宽度防止文本撑满 */
.info-col {
  font-size: 24px;
  max-width: 420px;
}

.info-col:first-child {
  text-align: right;
}

.info-text {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 115%;
  font-weight: 200;
}

/* 桌面端（≥1024px）：两列并排 */
@media screen and (min-width: 1024px) {
  .info-col {
    width: 46.6%;
  }
}

/* 移动端（<1024px）：单列堆叠，统一左对齐 */
@media screen and (max-width: 1023px) {
  .info-col {
    width: 100%;
    text-align: left;
  }
}

修复说明 #

1. 给.info-block添加max-width: 50%和margin: 0 auto，直接实现桌面端总宽度限制+居中的需求
2. 给.info-col设置max-width: 420px，避免屏幕过大时文本无限拉伸
3. 调整媒体查询逻辑：
   • 桌面端（≥1024px）固定两列宽度为46.6%，保持并排
   • 移动端（<1024px）让列宽度占100%，自动堆叠，同时统一左对齐优化阅读体验
4. 移除原1900px的特殊媒体查询，用通用的max-width规则替代，适配全尺寸桌面屏

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