添加文本时反应元素错误地改变位置答案

【问题标题】：React element incorrectly changes position when adding text添加文本时反应元素错误地改变位置
【发布时间】：2021-03-17 18:16:30
【问题描述】：

我正在一个 laravel 项目中创建一个简单的反应组件来显示我的数据库中的产品缩略图。在测试我的元素时，我注意到当我添加任何类型的文本时，div 会错误地改变位置。

如上所示，每当我将文本添加到我的product-card 之一时，它都会向下滑动页面，而空的 div 将保持在上方。 [如果有区别的话，我也在使用 Bootstrap 4 和 Laravel]

我的 React 组件代码：

import React from 'react';
import ReactDOM from 'react-dom';


export default class Featured extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container featured-container">
                <div className="product-card">{this.props.testdata}</div>
                <div className="product-card"></div>
                <div className="product-card">test</div>
                <div className="product-card"></div>
            </div>
        );
    }
}

var data = $('#featured').data("testdata");

if (document.getElementById('featured')) {
    ReactDOM.render(<Featured testdata={ data } />, document.getElementById('featured'));
}

一些应用CSS：

.product-card{
        background-color: rgb(221, 210, 179);
        display: inline-block;
        width: 250px;
        height: 300px;
        border: 2px solid red;
        margin-left:10px;
        margin-right: 10px;
    }

我是响应前端的新手，谁能向我解释为什么这是标准行为以及如何解决它？

【问题讨论】：

标签： javascript css reactjs laravel position

【解决方案1】：

给container以下样式：

.container{
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: row;
}

工作示例：Stackblitz

【讨论】：