使第一个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>