让第一个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属性的文本并进行一些小修正。所以检查这是否满足你的需要。

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;