移动端优先开发：如何让club times的div在宽屏时横向排列

核心解决方案 #

基于移动端优先思路，利用Flexbox布局实现屏幕尺寸增大时#club-times区域子元素横向排列：

1. 修正HTML类名错误
   原代码中#club-times的class包含多余逗号，需调整：

<section id="club-times" class="black-background white-text">

2. 添加大屏Flex布局规则
   在平板及以上屏幕的媒体查询中，给#club-times容器添加Flex属性，触发子元素横向排列：

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {
  /* ... 保留原有header、main等代码 ... */
  
  /* Club Times 横向排列 */
  #club-times {
    display: flex;
    flex-wrap: wrap; /* 屏幕宽度不足时自动换行，避免内容溢出 */
    justify-content: space-around; /* 子元素均匀分布 */
    padding: 1rem 0;
  }
}

效果说明 #

• 移动端（<768px）：子div默认垂直堆叠，适配小屏浏览
• 平板及以上屏幕：#club-times启用Flex布局，子元素横向并排；结合已有的flex-basis:200px和flex-grow:1，子元素会自动分配宽度，flex-wrap保证在窄屏时自动换行，维持响应式体验

修改后的关键CSS片段 #

/*Club times*/
#club-times h1 {
  color: #ffffff;
  padding-top: 1rem;
  text-align: center;
  font-family: inherit;
}

#club-times div {
  padding: 1rem;
  text-align: center;
  flex-basis: 200px;
  flex-grow: 1;
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {
  /* Header */
  nav {
    display: block;
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-top: 1.5rem;
  }
  #menu {
    display: flex;
  }
  #menu>li {
    padding-left: 1rem;
  }
  #nav-toggle-label {
    display: none;
  }
  #logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
  }
  /*Main*/
  main {
    margin-top: 75px;
  }
  /*Hero*/
  #cover-text {
    width: 400px;
    right: 0;
  }
  /*About us*/
  #about {
    height: 400px;
  }
  /* Club Times 横向排列 */
  #club-times {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1rem 0;
  }
}

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