使第一個div不能推下一個

Question

如何讓第一個div（包含文本）不推送圖像？ 與第二種情況一樣，如果文字較長，它會將我的圖像推向右側。

我提到帶文本的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之間有空間的類名稱。這是計爲兩個類。要包裝我使用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>