Wie richtet man Bild und Text nebeneinander aus? Flexible HTML-CSS-Box

Question

Der Text wird jetzt unterhalb des Bildes ausgerichtet. Ich möchte, dass der Text vertikal neben dem Bild ausgerichtet wird. Ich habe versucht, flex-direction: columns und justify-content: center hinzuzufügen, aber das hat nicht funktioniert. Ich habe es auch mit float versucht, aber auch das hat nicht funktioniert. Ich kann nicht herausfinden, wie ich Text und Bild nebeneinander ausrichten kann. Wie kann ich sie nebeneinander ausrichten? Gibt es Fehler in meinem Code?

.whoweare {
  Polsterung: 80px 0px 50px;
  Hintergrundfarbe: #000000;
}

.whoweare #whoweareimg {
  Breite: 100 %;
  Mindestbreite: 200 Pixel;
}

.whoweare .content {
  -webkit-display: flex;
  Anzeige: Flex;
  Flex-Wrap: wickeln;
  /* Flex-Richtung: Spalte */
  /* justify-content: center;
}

.whoweare .content .box {
  /* padding:5px;
Flex:0 0 100 %;
maximale Breite: 100 % */
  Polsterung: 5px;
  Flex: 0 0 100 %;
  maximale Breite: 100 %;
}

.whoweare .content #whoweareimg {
  Breite: 50 %;
  -webkit-transform: rotationY(180deg);
  transformieren: rotationY(180deg);
  Polsterung: 30px;
}

.whoweare .content h2 {
  Schriftgröße: 50px;
  Schriftstärke: 500;
  Rand: 20px;
  Farbe: #ffffff;
  Polsterung: 0px 0px 20px;
}

.whoweare .content p {
  Schriftgröße: 20px;
  Zeilenhöhe: 50px;
  Farbe: #ffffff;
  Rand: 20px;
  Polsterung: 0px 0px 20px;
  Schriftfamilie: „Open Sans“, serifenlos;
}

<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>Wer sind wir</h2>
          <p>UNDRGRND Muscle & Fitness, Straßenkultur trifft auf Bodybuilding und Fitness-Lifestyle. Unser Ziel ist es, unseren Mitgliedern ein einzigartiges, modernes Trainingserlebnis in der Region Vaughan/Greater Toronto zu bieten.
            </br>
            </br>
            Erleben Sie eine einzigartige Trainingsatmosphäre, die Ihnen hilft, ein unvergleichliches Training zu absolvieren. IFBB Professional Athletes bietet exklusive Trainingseinheiten an, um Mitgliedern dabei zu helfen, ihren Lebensstil und/oder ihre Wettkampfvorbereitungsziele zu erreichen. Die Einrichtung wird die besten Fitnessgeräte auf dem Markt bieten, darunter Atlantis, Cyber, Arsenal und mehr.
            </br>
            </br>
            Bei UNDRNRGD sind wir alle eine große Familie, die zusammenarbeitet.
<p><br /></p>

Answer 1

您的HTML代码似乎有问题，因为其中一个<div class="box text wow slideInRight">嵌套在另一个<div class="box text wow slideInRight">中，但无论如何，这是我为解决您的问题而提出的代码。

思路是.whoweare .content .box:first-child是您的弹性容器，它的两个子元素（<div class="item wow bounceInUp">和另一个<div class="box text wow slideInRight">）将并排对齐。

.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这里我们都在一起。