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

Question

我目前有多个 div，每个 div 都有自己的内容，包含图像、按钮和文本。我循环遍历对象数组以在 react/redux JSX 中创建这些 divdiv 显示在彼此下方，我希望它们水平显示。理想情况下，我想要三个到一页，但只要它水平显示我就很满意。这是我的 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 {

  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 控制项目数

Answer 2

您正在将该属性应用于您尝试水平跨越的元素的父级的父级。您的类 CSS 应该应用于<ul>.

<div>

   <ul className="rows">

此外，flexbox 将水平跨越并且更容易使用和推理

.rows .row {

  display: flex;

  // flex-wrap: wrap <- if needed

}