Comment aligner l’image et le texte côte à côte ? Boîte flexible HTML CSS

Question

Le texte est désormais aligné sous l'image. Je veux que le texte soit aligné verticalement à côté de l'image. J'ai essayé d'ajouter flex-direction: column et justify-content: center mais cela n'a pas fonctionné. J'ai aussi essayé float mais cela n'a pas fonctionné non plus. Je n'arrive pas à comprendre comment aligner le texte et l'image côte à côte. Comment puis-je les aligner côte à côte ? Y a-t-il des erreurs dans mon code ?

.whoweare {
  remplissage : 80px 0px 50px ;
  couleur d'arrière-plan : #000000 ;
}

.whoweare #whoweareimg {
  largeur : 100 % ;
  largeur minimale : 200 px ;
}

.whoweare .content {
  -webkit-affichage : flex ;
  affichage : flexible ;
  flex-wrap : envelopper ;
  /* flex-direction: colonne */
  /* justifier-contenu : centre */
}

.whoweare .content .box {
  /* remplissage:5px;
flexion :0 0 100 % ;
largeur maximale : 100 % ;
  remplissage : 5 px ;
  flexion : 0 0 100 % ;
  largeur maximale : 100 % ;
}

.whoweare .content #whoweareimg {
  largeur : 50 % ;
  -webkit-transform : rotationY (180 deg );
  transformation : rotationY (180 deg );
  remplissage : 30 px ;
}

.whoweare .content h2 {
  taille de police : 50 px ;
  poids de la police : 500 ;
  marge : 20px ;
  couleur : #ffffff ;
  remplissage : 0px 0px 20px ;
}

.whoweare .content p {
  taille de police : 20 px ;
  hauteur de ligne : 50 px ;
  couleur : #ffffff ;
  marge : 20px ;
  remplissage : 0px 0px 20px ;
  famille de polices : « Open Sans », sans-serif ;
}</pré>
<pre class="brush:html;toolbar:false;"><section class="whoweare" id="whoweare">
  <div class="conteneur">
    <div class="content">
      <div class="boîte de texte wow slideInRight">
        <!-- <div class="class-items">
        <div class="élément wow rebondInUp">
          <!-- <div class="item-img">
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
        </div>
        <div class="boîte de texte wow slideInRight">
          <h2>Qui sommes-nous</h2>
          <p>UNDRGRND Muscle & Fitness, la culture de rue rencontre le bodybuilding et le style de vie fitness. Notre objectif est d'offrir à nos membres une expérience de formation unique et moderne dans la région de Vaughan/Grand Toronto.
            ≪/br>
            ≪/br>
            Découvrez une atmosphère d'entraînement unique pour vous aider à offrir un entraînement sans précédent. IFBB Professional Athletes propose des séances d'entraînement exclusives pour aider les membres à atteindre leurs objectifs de style de vie et/ou de préparation à la compétition. L'installation offrira les meilleurs équipements de fitness du marché, notamment Atlantis, Cyber, Arsenal et plus encore.
            ≪/br>
            ≪/br>
            À l’UNDRNRGD, nous sommes tous une grande famille travaillant ensemble.
<p><br /></p>

Answer 1

Il semble y avoir un problème avec votre code HTML car l'un des <div class="box text wow slideInRight">嵌套在另一个<div class="box text wow slideInRight"> est dedans, mais quoi qu'il en soit, voici le code que j'ai trouvé pour résoudre votre problème.

L'idée est .whoweare .content .box:first-child是您的弹性容器，它的两个子元素（<div class="item wow bounceInUp">和另一个<div class="box text wow slideInRight">) de les aligner côte à côte.

.whoweare {
  padding: 80px 0px 50px;
  background-color: #000000;
}

.whoweare #whoweareimg {
  width: 100%;
  min-width: 200px;
}

.whoweare .content .box {
  padding: 5px;
  max-width: 100%;
}

.whoweare .content .box:first-child {
  display: flex;
}

.whoweare .content #whoweareimg {
  width: 50%;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 30px;
}

.whoweare .content h2 {
  font-size: 50px;
  font-weight: 500;
  margin: 20px;
  color: #ffffff;
  padding: 0px 0px 20px;
}

.whoweare .content p {
  font-size: 20px;
  line-height: 50px;
  color: #ffffff;
  margin: 20px;
  padding: 0px 0px 20px;
  font-family: 'Open Sans', sans-serif;
}

<section class="whoweare" id="whoweare">
  <div class="container">
    <div class="content">
      <div class="box text wow slideInRight">
        <!-- <div class="class-items"> -->
        <div class="item wow bounceInUp">
          <!-- <div class="item-img"> -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
        </div>
        <div class="box text wow slideInRight">
          <h2>我们是谁</h2>
          <p>UNDRGRND Muscle & Fitness，街头文化与健美和健身生活方式相结合。我们的目标是为我们的会员提供独特的现代化培训体验，在Vaughan/GTA地区。
            </br>
            </br>
            体验独一无二的培训氛围，帮助您进行无与伦比的锻炼。IFBB职业运动员提供独家培训课程，以帮助会员实现他们的生活方式和/或比赛准备目标。该设施将提供市场上最好的健身设备，包括Atlantis、Cyber、Arsenal等。
            </br>
            </br>
            我们都是一个大家庭，在UNDRNRGD这里我们都在一起。