Question

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

由于网络主机，我不得不使用内联css来设置网站的样式。（相信我，我宁愿使用css文件，但由于选择了网络主机，因此不能使用css文件）

通常我会使用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应用于图片

＆＃13;

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

＆＃13;

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。将最大宽度应用于同级元素：

将最大宽度应用于#texts的同级元素（#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 left，例如：

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

注意：可能需要在包含的父元素上清除此float。

就像现在一样，默认情况下，此元素（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>

Answer 4

使用内联通常不是最好的主意，但如果您在这种情况下需要做什么，那么您仍然可以使用Flexbox：

＆＃13;

<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 style="display: flex;">
  
      <div id="image" style="margin-left: 10px;">
          <img src="http://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>
</div>

＆＃13;

使用此功能，您需要在图像和文本内容周围添加另一个div并将其设置为display: flex;

Answer 5

<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: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
          This is a title
  </h1>
  
  <div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
          <img src="https://placehold.it/100x200" width="100" height="200" alt="Image"> 
      </div>
	  
	  <div id="texts" style=""> 
<p>
  
          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. 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 6

<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="http://placehold.it/100x200" width="100" height="200" alt="Image"> 
      </div>

      <div id="texts" style="float:right;width:90%;"> 
<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>

内联CSS图像和段落内联

6 个答案: