移动端4个40%视口宽度Div横向滚动布局问题求助

嘿，我来帮你搞定这个横向滚动的布局问题！你现在用display: table的方式其实不太适配这个需求——table布局天生会自适应容器宽度，子元素的宽度设置很容易被它的特性覆盖，所以才达不到你要的「显示2.5个Div、剩余部分横向滚动」的效果。

我给你两个可行的方案，优先推荐用Flexbox，代码更简洁也更易维护：

方案1：Flexbox实现 #

修改你的SCSS代码，把父容器的display: table换成flex布局，移动端配置如下：

#bsp-content {
  width: 100%;
  padding-bottom: 15px;

  @media all and (max-width: $mobile_breakpoint) {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap; /* 强制子元素不换行 */
    /* 可选：优化滚动条样式，提升体验 */
    scrollbar-width: thin;
  }

  .bsp-container:last-child {
    @include set_solid_border(0, $acc_grey, right);
  }

  .bsp-container {
    width: 40vw; /* 用vw单位直接绑定视口宽度的40% */
    flex-shrink: 0; /* 禁止子元素被压缩，保证宽度稳定 */
    /* 这里可以添加你的其他样式，比如内边距、背景色等 */
  }
}

为什么这样能行？flex-wrap: nowrap会让所有.bsp-container强制排在同一行，overflow-x: auto在内容超出容器宽度时自动显示横向滚动条；40vw的宽度刚好让每个Div占视口的40%，4个Div总宽度是160vw，容器只有100vw，自然就能显示2.5个，剩下的1.5个可以滚动查看。flex-shrink: 0是关键，防止子元素被flex布局压缩变形。

方案2：Inline-block实现 #

如果你不想用Flexbox，也可以用inline-block的方式实现：

#bsp-content {
  width: 100%;
  padding-bottom: 15px;

  @media all and (max-width: $mobile_breakpoint) {
    overflow-x: auto;
    white-space: nowrap; /* 禁止容器内元素换行 */
  }

  .bsp-container:last-child {
    @include set_solid_border(0, $acc_grey, right);
  }

  .bsp-container {
    width: 40vw;
    display: inline-block;
    white-space: normal; /* 重置子元素的white-space，避免内部文本不换行 */
    vertical-align: top; /* 让所有子元素顶部对齐 */
    /* 其他样式 */
  }
}

这个方案靠white-space: nowrap让子元素强制排成一行，inline-block让它们在同一行显示，同样能达到你要的效果。

额外注意点 #

记得给元素加上box-sizing: border-box（可以全局设置或者在父容器/子元素单独设置），避免内边距、边框让子元素宽度超出预期，破坏布局。

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