ReactJS实现一行展示多个Card（4-5个）的方法咨询

嘿，我帮你找到问题根源啦！你现在的代码里每循环一次就生成一个独立的<Card.Group>，而每个Card.Group默认是块级元素，自然会把每张卡片单独放在一行。咱们只需要调整组件结构，就能轻松实现一行展示多张卡片的效果～

方案1：用Card.Group的itemsPerRow属性（最简单） #

Card.Group本身就支持通过itemsPerRow属性直接指定每行显示的卡片数量，比如设置为4就会一行放4个，还能自动适配响应式场景。修改你的renderItems方法如下：

renderItems(){
  // 用接口返回的真实图片，无图时用占位图兜底
  const fallbackSrc = 'https://placeimg.com/640/480/arch'
  return (
    <Card.Group itemsPerRow={4} stackable> {/* stackable让小屏幕自动堆叠 */}
      {this.state.news.map((item, index) =>(
        <Card 
          key={index} 
          image={item.urlToImage || fallbackSrc} 
          header={item.title} 
          meta={item.source.name} 
          description={item.description ? `${item.description.substring(0, 100)}...` : '暂无描述'} 
        />
      ))}
    </Card.Group>
  );
}

方案2：用Grid组件精准控制列宽 #

如果需要更灵活的布局控制（比如不同屏幕尺寸下显示不同数量的卡片），可以结合Semantic UI的Grid组件：

renderItems(){
  const fallbackSrc = 'https://placeimg.com/640/480/arch'
  return (
    <Grid columns={4} doubling stackable> {/* columns指定列数，doubling让小屏幕自动调整列宽 */}
      {this.state.news.map((item, index) =>(
        <Grid.Column key={index}>
          <Card 
            image={item.urlToImage || fallbackSrc} 
            header={item.title} 
            meta={item.source.name} 
            description={item.description ? `${item.description.substring(0, 100)}...` : '暂无描述'} 
          />
        </Grid.Column>
      ))}
    </Grid>
  );
}

关键修改点说明 #

• 把<Card.Group>（或<Grid>）移到循环外面，让所有卡片都属于同一个容器，容器会自动排列内部卡片。
• 循环时必须给每个Card（或Grid.Column）添加key属性，避免React列表渲染警告。
• 替换硬编码的卡片内容，改用接口返回的真实新闻数据，让展示更贴合业务需求。
• 添加stackable属性，保证移动端等小屏幕下卡片自动堆叠，提升响应式体验。

最后调整render方法，给内容加个内边距让布局更美观：

render() {
  return (
    <div style={{ padding: '2rem' }}>
      {this.renderItems()}
    </div>
  );
}

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