画像とテキストを横に並べるにはどうすればよいですか? HTML CSS フレキシブル ボックス

Question

テキストが画像の下に配置されます。テキストを画像の横に縦方向に配置したいと考えています。 flex-direction:column と justify-content:center を追加しようとしましたが、うまくいきませんでした。 float も試しましたが、それも機能しませんでした。文字と画像を並べて配置する方法がわかりません。どうすれば横に並べることができますか?私のコードにエラーはありますか?

.whoweare {
  パディング: 80px 0px 50px;
  背景色: #000000;
}

.whoweare #whoweareimg {
  幅: 100%;
  最小幅: 200px;
}

.whoweare .content {
  -webkit-display: フレックス;
  ディスプレイ: フレックス;
  フレックスラップ: ラップ;
  /* フレックス方向: 列; */
  /* justify-content: center; */
}

.whoweare .content .box {
  /* パディング:5px;
フレックス:0 0 100%;
最大幅: 100%; */
  パディング: 5px;
  フレックス: 0 0 100%;
  最大幅: 100%;
}

.whoweare .content #whoweareimg {
  幅: 50%;
  -webkit-transform: 回転 Y(180 度);
  変換: 回転 Y(180 度);
  パディング: 30px;
}

.whoweare .content h2 {
  フォントサイズ: 50px;
  フォントの太さ: 500;
  マージン: 20px;
  色: #ffffff;
  パディング: 0px 0px 20px;
}

.whoweare .content p {
  フォントサイズ: 20px;
  行の高さ: 50px;
  色: #ffffff;
  マージン: 20px;
  パディング: 0px 0px 20px;
  フォントファミリー: 'Open Sans'、サンセリフ;
}

<section class="whoweare" id="whoweare">
  <div class="コンテナ">
    <div class="コンテンツ">
      <div class="box text wow slideInRight">
        <!-- <div class="クラス項目"> -->
        <div class="item wow bounceInUp">
          <!-- <div class="item-img"> -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="クラス" />
        </div>
        <div class="box text wow slideInRight">
          <h2>私たちは誰ですか</h2>
          <p>UNDRGRND マッスル & フィットネス、ストリート カルチャーとボディビルディングとフィットネス ライフスタイルが融合。私たちの目標は、ボーン/トロント都市圏でユニークでモダンなトレーニング体験を会員に提供することです。
            </br>
            </br>
            比類のないトレーニングを実現するユニークなトレーニング雰囲気を体験してください。 IFBB プロアスリートは、会員のライフスタイルや競技準備の目標を達成できるよう、特別なトレーニング セッションを提供しています。この施設では、アトランティス、サイバー、アーセナルなど、市場で最高のフィットネス機器を提供します。
            </br>
            </br>
            UNDRNRGD では、私たち全員が 1 つの大きな家族として協力して働いています。
<p><br /></p>

Answer 1

<div class="box text wow slideInRight"> の 1 つが別の <div class="box 内にネストされているため、HTML コードに問題があるようです。 text wow slideInRight"> しかし、とにかく、これがあなたの問題を解決するために私が思いついたコードです。

アイデアは .whoweare .content .box:first-child がエラスティック コンテナーであり、その 2 つの子要素 ​​(<div class="item wow bounceInUp">と別の <div class="box wow text slideInRight">) が並べて配置されます。

リーリー リーリー