Html 使用CSS排列元素的困难

在我的reactjs项目中，我正在努力排列html元素。我对所有的网络开发和css都是新手，我完全不知道如何以一种响应的方式解决它。我正在尝试解决我的应用程序中元素的以下放置问题： 在这里，我向您展示我在react jsx中的实际功能：

<img className="img" src={this.props.img_1} alt="DummyPicture" />
      <span className="personName">{this.props.name_1}</span>
      <span className="personAge">({this.props.age_1})</span>
      <span className="personMatching">
        {this.props.matching_1}% gemeinsame Interessen
      </span>

<img className="img" src={this.props.img_2} alt="DummyPicture" />
    <span className="personName">
      {this.props.name_2} ({this.props.age_2})
     </span>
     <span className="personMatching">
       {this.props.matching_2}% gemeinsame Interessen
     </span>

---

我也尝试过类似flex-box或display:inline这样的想法，但我认为我只是对它缺乏了解。希望你们中有人能在这里帮助我。

今天的最佳实践是使用

正如您在下面的示例中看到的，flex将为您对齐项目

.person{
显示器：flex；
对齐项目：居中；
}
.info{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
左边距：10px；
}
.年龄{
字体大小：12px；
左边距：5px；
}
.匹配，.名称{
保证金：5px0；
弹性基准：100%；
}
.img{
宽度：48磅；
身高：48分；
边界半径：50%；
}

卡罗琳·斯科特（26岁）

74%的gemeinsame利息

我建议大家阅读一下如何使用flex box。是一个很好的网站，可以学习如何以好玩的方式使用它。在他们的基础教程中，假设您熟悉HTML和JavaScript。如果不了解HTML和JavaScript，就不能使用React。如果没有CSS，您就无法真正使用这两种方法中的任何一种。JavaScript对DOM所做的大部分工作是动态更改CSS（和HTML）。

.personName {
  width: 30%;
   float: left;
  margin-bottom: 5%;
   }

.personAge {
  width: 60%;
  float: left;
  margin-bottom: 5%;
 }
.personMatching {
  float: left;
  width: 70%;
    margin-bottom: 5%;
 }

.img {
  width: 48pt;
  height: 48pt;
  float: left;

  margin-left: 5%;
 }