Bagaimana untuk menyelaraskan imej dan teks bersebelahan? Kotak fleksibel HTML CSS

Question

Teks kini dijajarkan di bawah imej. Saya mahu teks dijajarkan secara menegak di sebelah imej. Saya cuba menambah flex-direction: column dan justify-content: center Saya juga mencuba float tetapi itu juga tidak berjaya. Saya tidak dapat memikirkan cara menjajarkan teks dan imej sebelah menyebelah. Bagaimanakah saya boleh menyelaraskannya sebelah menyebelah? Adakah terdapat sebarang ralat dalam kod saya?

.whoweare {
  padding: 80px 0px 50px;
  warna latar belakang: #000000;
}

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

.whoweare .content {
  -webkit-paparan: flex;
  paparan: flex;
  flex-wrap: bungkus;
  /* flex-direction: lajur */
  /* justify-content: pusat */
}

.whoweare .content .box {
  /* padding:5px;
lentur:0 0 100%;
lebar maksimum: 100%;
  padding: 5px;
  lentur: 0 0 100%;
  lebar maksimum: 100%;
}

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

.whoweare .content h2 {
  saiz fon: 50px;
  berat fon: 500;
  jidar: 20px;
  warna: #ffffff;
  padding: 0px 0px 20px;
}

.whoweare .content p {
  saiz fon: 20px;
  ketinggian garis: 50px;
  warna: #ffffff;
  jidar: 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-item">
        <div class="item wow bounceInUp">
          <!-- <div class="item-img">
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="kelas" />
        </div>
        <div class="box text wow slideInRight">
          <h2>Siapa kita</h2>
          <p>UNDRGRND Otot & Kecergasan, budaya jalanan memenuhi gaya hidup bina badan dan kecergasan. Matlamat kami adalah untuk menyediakan ahli kami pengalaman latihan moden yang unik di Vaughan/Greater Toronto Area.
            </br>
            </br>
            Alami suasana latihan yang unik untuk membantu anda menyampaikan senaman yang tiada tandingannya. Atlet Profesional IFBB menawarkan sesi latihan eksklusif untuk membantu ahli mencapai gaya hidup dan/atau matlamat persediaan pertandingan mereka. Kemudahan itu akan menawarkan peralatan kecergasan terbaik di pasaran termasuk Atlantis, Cyber, Arsenal dan banyak lagi.
            </br>
            </br>
            Di UNDRNRGD, kami semua adalah satu keluarga besar, bekerjasama.
<p><br /></p>

Answer 1

Nampaknya ada masalah dengan kod HTML anda kerana salah satu <div class="box text wow slideInRight">嵌套在另一个<div class="box text wow slideInRight"> ada di dalamnya, tetapi bagaimanapun, inilah kod yang saya buat untuk menyelesaikan masalah anda.

Ideanya ialah .whoweare .content .box:first-child是您的弹性容器，它的两个子元素（<div class="item wow bounceInUp">和另一个<div class="box text wow slideInRight">) selaraskan mereka sebelah menyebelah.

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