内联CSS图像和段落内联

Question

我有困难让我的div布局一个图片和段落在同一行，我已经搜索了许多主题的堆叠溢出和谷歌，但没有解决办法是有效的。

由于网页主机，我不得不使用内联css来样式的网站。(相信我，我更愿意使用css文件，但由于所选的web主机，还没有这样做的能力)

通常，我会使用引导来实现这一点，但正如所指出的，这不是一个选项。

​

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

​

Answer 2

您可以从float: right div中删除#texts并将float: left添加到#image div：

​

<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; float:left">
    <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> 
  </div>

  <div id="texts"> 
    <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.
    </p>
  </div>
</div>

​

Answer 3

1.对兄弟元素应用最大宽度：

将最大宽度应用于#image的兄弟元素(#image)，例如：

<div id="texts" style="float:right; max-width: 80%;">

注意：max-width属性值仅作为演示提供。根据要求进行相应的调整。

就像现在一样，它包含足够的文本/内容来占据整个水平宽度。

2.声明第一个嵌套元素的显示类型或浮动左

将第一个嵌套元素(#image)声明为内联块，例如：

<div id="image" style="margin-left: 10px;display: inline-block;">

或者float it left，例如：

<div id="image" style="margin-left: 10px;float: left;">

注意:可能需要清除包含父元素的浮点。

现在，这个元素(div)默认是块元素，块元素将占用包含元素的全部可用宽度。

代码片段演示：

​

<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; display: inline-block;">
    <img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
  </div>

  <div id="texts" style="float:right; max-width: 80%;">
    <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.</p>
  </div>

​