垂直而非水平渲染组件

Question

我有两个彼此相邻的div：artwork__feed和preview

当我通过数据库进行映射时，图像会水平渲染并溢出到preview div中。

查看此处：

问题

如何垂直渲染我的所有FeedCard组件，以免它们溢出到我的preview div中？

这是我的渲染代码：

  return (
    <div className="feed">
      <div className="artwork__feed">
        {artworks.map((artwork) => (
          <FeedCard
            imageUrl={artwork.imageUrl}
            title={artwork.title}
            artist={artwork.artist}
            year={artwork.year}
          />
        ))}
      </div>
      <div className="preview">
        <div className="phone"></div>
      </div>
    </div>
  );
}

这是我的FeedCard代码：

function FeedCard({
  imageUrl,
  title,
  artist,
  year,
  medium,
  height,
  width,
  category,
}) {
  return (
    <div className="feed__card">
      <div className="feed__card__container">
        <div className="feed__category">
          <img src={imageUrl} className="artwork__image__feed" />
        </div>
        <div className="artwork__info">
          <div className="artwork__title__artist">
            <h1>{title}</h1>
            <p>{artist}</p>
          </div>
          <div className="artwork__bid_button">
            <button>Bid</button>
          </div>
        </div>
      </div>
    </div>
  );
}

这是我的Feed.css代码：

.artwork__feed {
  display: flex;
  align-items: center;
  background-color: white;
}

Answer 1

可能grid是您最好的选择：

.artwork__feed {
display: grid;
/*this will give two equal columns*/
grid-template-columns: 1fr 1fr;
align-items: center;
background-color: white;

}