html - 使第一个 div 不插入下一个

Question

如何让第一个 div(包含文本)不推送图像？与第二个一样，如果文本较长，它会将我的图像推到右边。

我提到带有文本的 div 向左浮动并且有一些左右填充。

此外，我无法正确 float 图像。

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>