最初のdivが次の部分をプッシュしないようにする

Question

最初のdiv（テキストを含む）でイメージをプッシュしないようにするにはどうすればよいですか？ 2番目と同様に、テキストが長い場合は、画像が右側にプッシュされます。

私は、テキスト付きのdivは左に浮動小数点があり、左と右のパディングがあることを述べました。

また、画像を正しくフロートできません。

this is what i mean

任意のアイデア？

これはコードです：

.text box { 
 
    float: left; 
 
    padding-right: 100px; 
 
    padding-left: 100px; 
 
} 
 

 
div#firstimagediv, 
 
div#secondimagediv { 
 
    width: 657px; 
 
    height: 225px; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    overflow: hidden; 
 
    margin-left: 50px; 
 
} 
 

 
div#firstimagediv figure { 
 
    background-image: url(https://placeholder.pics/svg/200.jpg); 
 
    background-size: cover; 
 
    position: relative; 
 
    font-size: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div#secondimagediv figure { 
 
    background-image: url(https://placeholder.pics/svg/200.jpg); 
 
    background-size: cover; 
 
    position: relative; 
 
    font-size: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
}

<div class="text box"> 
 
    <h1>Text</h1> 
 
    <p>ParagraphParagraphParagraphParagraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
</div> 
 
<div id="firstimagediv"> 
 
    <figure> 
 
    <div id="firstimage"></div> 
 
    </figure> 
 
</div> 
 

 
<div class="text box"> 
 
    <h1>Longer Text</h1> 
 
    <p>ParagraphParagraphParagraphParagraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
</div> 
 
<div id="secondimagediv"> 
 
    <figure> 
 
    <div id="secondimage"></div> 
 
    </figure> 
 
</div>

Answer 1

以下のスニペットを確認し、これが何をしたいですか私はあなたの必要性に応じて私の答えを編集する場合は教えてください（をクリックしてください。あなたが間違っていたことは、間にスペースを持つtext boxのようなクラス名を作っていたことです.2つのクラスとしてカウントされます。私はテキストをラップするために、CSS word-wrapプロパティを使用し、これがあなたの必要を満たすかどうかを確認してください。

.textbox { 
 
    padding-left:100px; 
 
    float: left; 
 
    max-width:30%; 
 
    word-wrap:break-word; 
 
    padding-right: 100px; 
 
} 
 

 
div#firstimagediv, div#secondimagediv { 
 
    max-width: 70%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    /*margin-left: 50px;*/ 
 
} 
 
img{ 
 
height:inherit; 
 
width:inherit 
 
}

<div> 
 
<div class="textbox"> 
 
    <h1>Text</h1> 
 
    <p>ParagraphParagraphParagraphParagraphpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
</div> 
 
<div id="firstimagediv"> 
 
    <figure> 
 
    <div id="firstimage"> 
 
    <img src="http://via.placeholder.com/700x300" /> 
 
    </div> 
 
    </figure> 
 
</div> 
 
</div> 
 

 
<div> 
 
<div class="textbox"> 
 
    <h1>Longer Text</h1> 
 
    <p>ParagraphParagraphParagraphParagraphppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
</div> 
 
<div id="secondimagediv"> 
 
    <figure> 
 
    <div id="secondimage"> 
 
    <img src="http://via.placeholder.com/700x300" /> 
 
    </div> 
 
    </figure> 
 
</div> 
 
</div>