Question

我正在为我的reactjs项目中的html元素处理而苦苦挣扎。我是所有Web开发人员和CSS的新手，我绝对不知道如何以响应方式解决它。我正在尝试解决elemtns在我的应用程序中的以下放置： Link to what i try to archieve 在这里，我向您展示我在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>

这是我的CSS：

.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%;
 }

我也尝试过使用flex-box或display：inline之类的方法，但是我认为我对此并不了解。希望你们中的有人可以在这里帮助我。

Answer 1

当今的最佳做法是使用flexbox。

如下面的示例所示，flex将为您对齐项目。

.person {
  display: flex;
  align-items: center;
}

.info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 10px;
}

.age {
  font-size: 12px;
  margin-left: 5px;
}

.matching, .name {
  margin: 5px 0;
  flex-basis: 100%;
}

.img {
  width: 48pt;
  height: 48pt;
  border-radius: 50%;
}

<div class="person">
  <img class="img" src="https://randomuser.me/api/portraits/women/81.jpg" alt="DummyPicture" />
  <div class="info">
    <p class="name">Caroline Scott <span class="age">(26)</span></p>
    <p class="matching">74% gemeinsame Interessen</p>
  </div>
</div>

用CSS安排元素的困难

1 个答案: