使用flex和媒体查询做响应式布局时992px下元素无法同行问题咨询

解决方案 #

不需要全量重写代码，仅需调整flex布局属性+少量媒体查询即可实现需求，调整逻辑符合前端开发规范，不会在代码评审中被指出问题。

核心问题定位 #

你当前代码无法实现≥992px同行展示的核心原因是盒模型计算和flex属性设置不合理：

• .card_hostings 设置了width:50%+padding:50px+left:26px，默认content-box盒模型下实际占用宽度远超过50%父容器宽度
• .card_hostings--2 设置了width:auto+margin-left:70px+padding:50px，宽度没有做限制，父容器宽度不足时会被自动挤到下一行
• 父容器.section-2没有设置禁止换行属性，宽度不足时子元素自动换行

调整代码 #

你仅需要新增以下CSS代码即可，不需要修改原有业务样式：

/* 全局盒模型统一，可提前到公共样式部分 */
* {
  box-sizing: border-box;
}

@media screen and (min-width: 992px) {
  .section-2 {
    flex-wrap: nowrap; /* 禁止子元素换行 */
    gap: 70px; /* 两个区块的间距，替代原有.card_hostings--2的margin-left */
  }
  .card_hostings {
    flex: 1; /* 自适应占满剩余宽度，不需要写死50% */
    left: unset; /* 移除不合理的相对定位偏移 */
  }
  .card_hostings--2 {
    flex: 0 0 30%; /* 根据设计稿设置固定宽度占比，也可以写flex:1和左侧区块等分宽度 */
    margin-left: 0; /* 移除单独设置的左间距，统一用父容器gap控制 */
  }
}

/* 小于992px时自动换行适配移动端，也可以根据需求调整间距、内边距等 */
@media screen and (max-width: 991px) {
  .section-2 {
    flex-wrap: wrap;
    gap: 25px;
  }
  .card_hostings, .card_hostings--2 {
    width: 100%;
    margin-left: 0;
  }
}

可选优化建议 #

.item--2 内部的图文布局目前用float:left+固定margin-left实现，适配性较差，建议改成flex布局，避免不同宽度下文字错位：

.item--2 {
  display: flex;
  gap: 15px;
}
.item--2 img {
  float: unset;
  flex: 0 0 40%;
}
.item--2 .item-content {
  flex: 1;
}
/* 对应HTML给文字部分加个class为item-content的父容器即可 */

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