html - 内联 CSS 图像和段落内联

Question

我无法让我的 div 在同一行布置图像和段落，我在 stackoverflow 和 google 上搜索了很多主题，但没有解决方案。

由于网络托管服务商的原因，我不得不使用内联 CSS 来设置网站的样式。(相信我，我更愿意使用 css 文件，但由于所选择的 Web 主机，无法这样做)

通常我会使用 bootstrap 来实现这一点，但如前所述，这不是一个选项。

<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
          This is a title
  </h1>
  
  <div id="image" style="margin-left: 10px;">
          <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> 
      </div>
	  
	  <div id="texts" style="float:right;"> 
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px;  font-size: 120%;">
  
          Here is my content, I am  writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. 
	</div>
  </p>
</div>

我得到的是:

我想要的:

Answer 1

您需要做的就是将 float: left 应用于图像

<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
  <h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
    This is a title
  </h1>

  <div id="texts">
    <p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px;  font-size: 120%;">
      <img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
      it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
      it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
      it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
    </p>
  </div>
</div>