时间戳

首页 > 解决方案 > JavaScript React JSX：循环遍历对象数组并在网页中水平设置对象

javascript - JavaScript React JSX：循环遍历对象数组并在网页中水平设置对象

问题描述

我目前有多个 div，每个 div 都有自己的内容，包含图像、按钮和文本。

我遍历对象数组以在 react / redux JSX 中创建这些 div

div 显示在彼此下方，我希望它们水平显示。理想情况下，我想要一页三页，但只要水平显示我就满意了。

这是我的 JSX 反应代码片段。它在一个类组件中，它继承了属性房屋。房屋是一组对象。 

return (
    <div className="rows">
      <ul>
        {houses.map(house => (
          <li key={house.id}>
            <div className="row">

              <p>Location: {house.location}</p>
              <img src={house.imageUrl} height="150" width="320" />
              <p>FuelType: {robot.fuelType}</p>
              {/* delete button */}
              <button
                ... omitted button code
              </button>{" "}
              <button
                ... omitted button code
              </button>
            </div>
          </li>
        ))}
      </ul>

我尝试了很多方法来让我的 div 在屏幕上水平显示。包含：

.rows .row {
  display: inline-block;
}

但无论我做什么，div 都会显示在彼此的下方。

我能做些什么来解决这个问题？

标签： javascripthtmlcssreactjsjsx

解决方案

使用 cloumn 计数或网格

一种使用 cloumn 计数的简单方法：（连续 3 个）

.rows {
  display: block;
  column-count: 3;
}
.rows .row {
  break-inside: avoid;
}

您还可以使用 flex 或 grid ，例如：

.rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-gap: 10px;
  max-width: 900px;
}

并控制符合 max-width 的项目数

推荐阅读