时间戳

首页 > 解决方案 > 如何根据媒体查询使列表每行显示多个项目

reactjs - 如何根据媒体查询使列表每行显示多个项目

问题描述

我正在构建我的网站，该网站显示存储为 JSON 对象的各种列表。

最初列表显示所有项目，然后我有一个搜索框，可用于过滤掉不同的项目。

我希望我的列表每行显示多达 4 个 json 对象，一直到每行只有一个对象。取决于媒体查询。

我想通过简单地调整我的列表项 div 的大小，它会自动将额外的 div 放入每一行，直到使用容器 div 的最大宽度，然后它将在下一行呈现下一个对象等。但是这没有奏效，它继续仅在另一个对象下方显示一个对象，并且每行不会显示一个以上的对象。

列表布局：

export function Athlete(postDetail){
  return(
    <div className='Athletes'>
    <p>Name: {postDetail.Name}</p>
    <p>Town: {postDetail.Town}</p>
    <p>State: {postDetail.State} </p>
    <p>PostCode: {postDetail.PostCode}</p>
    <img src={postDetail.Image} className='photo' alt='athlete photo'/>
    </div>
  )
}

列表布局css：

.Athletes{
  width:15%;
  height: 15%;
  justify-items: center;
  align-self: center;
  background-color: grey;
  border-style:groove;
  justify-content: center;
  margin-bottom: 20px;
}

列表功能：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div>{athl}</div>
      }

搜索框功能：

export function AthleteSearchBox({value, handleInput}) {
  return (
    <div>
      <input onChange={handleInput} value={value} type ='text' className = 
'searchBox'/>
    </div>
  );
}

最初我将 .Athletes{} 的高度和宽度设置为 55%，因此它每行只能渲染一个图像，因为两个将占据容器 div 的 100% 以上。但是现在我想渲染更多，我将它们减少到 15%，但结果仍然是相同的。

标签： reactjs

解决方案

div默认情况下是一个block元素，意味着兄弟 div 将默认堆叠。

如果您希望它们连续排列，您可以执行以下操作：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div style="display: flex; flex-wrap: wrap;">{athl}</div>
      }

display: flex;将所有直接子项放在一行中，而flex-wrap: wrap;wrap 将确保在给定行上没有足够空间时将项目放置在新行中。

推荐阅读