用CSS安排元素的困难

Question

Im struggling with some arraning of html elements in my reactjs project. Im new to all the webdevelopment and also to css and i have absolutly no idea how to resolve it in a responsive way. Im trying to solve the following placement of elemtns within my app: Link to what i try to archieve Here i show you what i actually have in 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>

And here my 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%;
 }  

I also tried it with thinks like flex-box or display:inline but I think I just have a lack of knowledge about it. Hope someone of you can help me out here.

Answer 1

The best practice today is to use flexbox .

As you see in the example below, flex will align items for you.

 .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>