时间戳

首页 > 解决方案 > How make side by side div elements?

javascript - How make side by side div elements?

问题描述

Hello i have in my react app component with list of events. I would like to display them side by side, not one by one. I was trying to do this with flexbox but something its wrong. Thanks for help.

.flex-container {
  display: flex;
}


.place-list {
  flex: 1;
  margin: 1rem auto;
  padding: 0;
  width: 100%;
  max-width: 20%;

}

return (
    <div className="flex-container">
      <div className="place-list">
        {props.items.map((place) => (
          <PlaceItem
            key={place.id}
            id={place.id}
            image={place.image}
            title={place.title}
            description={place.description}
            address={place.address}
            creatorId={place.creator}
            coordinates={place.location}
            onDelete={props.onDeletePlace}
          />
        ))}
      </div>
    </div>
  );
};

标签： javascripthtmlcss

解决方案

弹性容器需要弹性元素的父元素。

你的弹性容器是你想成为弹性元素的元素的祖父母。它只有一个孩子。

具有类的元素place-list需要输出每个元素，而<PlaceItem>不是所有元素的单个包装器。

推荐阅读