JavaScript react JSX : Looping Through Array of Objects And Setting Objects Horizontally Across Web Page

Question

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

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

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

这是我的 JSX react 代码片段。它在一个类组件中，它继承了属性 houses。 Houses 是一组对象。

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

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

<div>
   <ul className="rows">

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

.rows .row {
  display: flex;
  // flex-wrap: wrap <- if needed
}