JavaScript React JSX：遍历对象数组并在网页上水平设置对象

Question

我目前有多个 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 都只是显示在彼此的下面。

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

Answer 1

使用克隆计数或网格使用克隆计数的一种简单方法：（连续 3 个）.rows {&nbsp; display: block;&nbsp; column-count: 3;}.rows .row {&nbsp; break-inside: avoid;}您还可以使用 flex 或 grid ，例如：.rows {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));&nbsp; grid-gap: 10px;&nbsp; max-width: 900px;}并根据 max-width 控制项目数

Answer 2

您正在将该属性应用于您尝试水平跨越的元素的父级的父级。您的类 CSS 应该应用于<ul>.<div>&nbsp; &nbsp;<ul className="rows">此外，flexbox 将水平跨越并且更容易使用和推理.rows .row {&nbsp; display: flex;&nbsp; // flex-wrap: wrap <- if needed}