floatでboxを左右交互にレイアウトする方法

Question

||||boxの文章boxと画像boxを交互にfloatでレイアウトする方法を教えてください。

このように、文字と画像を交互に表示させたいです、

<div class="content">
      <div class="photo">
       <img src="img/img-working.jpg">
          </div>
             <div class="text">
             <h3 class="sub_title">集中しよう</h3>
              <p class="sub_text">集中は創造に直結します。WorkWithはあなたがクリエイティブに没頭できる場所を提供するため、160人を収容可能な空間に趣の異なる8種類のデスクとチェアを用意しました。今日の気分に合う場所がきっと見つかります。</p>
               
       </div>
        </div>
<div class="content">
                        <div class="photo2">
                        <img src="img/img-working.jpg">
                        </div>
                        <div class="text2">
                            <h3 class="sub_title">集中しよう</h3>
                            <p class="sub_text">集中は創造に直結します。WorkWithはあなたがクリエイティブに没頭できる場所を提供するため、160人を収容可能な空間に趣の異なる8種類のデスクとチェアを用意しました。今日の気分に合う場所がきっと見つかります。</p>
                        </div>
                    </div>

.text{
    float: right;
    width:430px;
    height: 280px;
    font-size:12px;
    background-color: #fffff3;
    padding: 3px;
     overflow: hidden;
}
.photo{
    float:right;
}

Comments

[Lhankor_Mhy]

「box を左右交互にfloatでレイアウトする」をもう少しわかりやすくお願いします。

表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1

[acchi]

言葉足らずですみません。画像をいれてみました。

[Lhankor_Mhy]

「floatで」というのは絶対条件ですか？

[acchi]

はい、絶対条件です。

Answer 1

こんな感じでしょうか？
サンプル

.text{
    float: right;
}
.photo{
    float:left;
}
.content:nth-child(odd) .text{
    float:left;
}
.content:nth-child(odd) .photo{
    float: right;
}