内联 CSS 图像和段落内联

2024-01-06

我无法让我的 div 在同一行上布局图像和段落,我在堆栈溢出和谷歌上搜索了许多主题,但没有解决方案有效。

由于网络主机的原因,我必须使用内联 css 来设置网站的样式。 (相信我,我更愿意使用 css 文件,但由于所选的网络主机而无法这样做)

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

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

What I'm getting: enter image description here

What I want: enter image description here


您所需要做的就是申请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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

内联 CSS 图像和段落内联 的相关文章

随机推荐