使用 CSS 排列元素的困难答案

【问题标题】：Difficulties arranging elements with CSS使用 CSS 排列元素的困难
【发布时间】：2019-01-04 04:39:16
【问题描述】：

我正在为我的 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 之类的想法，但我认为我对此缺乏了解。希望你们中的某个人可以在这里帮助我。

【问题讨论】：

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

标签： html css reactjs

【解决方案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>

【讨论】：