内联 CSS 图像和段落内联 [英] Inline CSS Image and Paragraph inline

查看：26
本文介绍了内联 CSS 图像和段落内联的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

由于网络主机的原因，我不得不使用内联 css 来设置网站的样式.(相信我，我更愿意使用 css 文件，但由于所选择的网络主机，没有这样做的能力)

通常我会使用引导程序来实现这一点，但如前所述，这不是一个选项.

<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px;边框半径:10 像素；背景颜色:#FFF1AD；框阴影:13 像素 15 像素 6 像素 #2b2626；边框顶部:30 像素实心 #ffd800;"><h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">这是一个标题<div id="image" style="margin-left: 10px;"><img src="https://placehold.it/100x200" width="100" height="200" alt="图片">

<div id="texts" style="float:right;"><p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">这是我的内容，我写的比我需要的要多得多，当它需要多行时，才能显示段落的外观.如果包含图像时文本保持在一起会不会很好.这里有一些更多的文本纯粹是为了测试除了一些错别字之外没有什么有趣的地方可以阅读.

</p>

我得到了什么:

我想要的:

解决方案

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

<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px;边框半径:10 像素；背景颜色:#FFF1AD；框阴影:13 像素 15 像素 6 像素 #2b2626；边框顶部:30 像素实心 #ffd800;"><h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">这是一个标题<div id="文本"><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;"/>这是我的内容，我写的比我需要的要多得多，当它需要多行时，才能显示段落的外观.不会如果包含图像时文本保持在一起，那就太好了.这里有一些更多的文本纯粹是为了测试除了一些错别字之外没有什么有趣的地方可以阅读.这是我的内容，我写的比我需要的要多得多，当它需要多行时，才能显示段落的外观.不会如果包含图像时文本保持在一起，那就太好了.这里有一些更多的文本纯粹是为了测试除了一些错别字之外没有什么有趣的地方可以阅读.这是我的内容，我写的比我需要的要多得多，当它需要多行时，才能显示段落的外观.不会如果包含图像时文本保持在一起，那就太好了.这里有一些更多的文本纯粹是为了测试除了一些错别字之外没有什么有趣的地方可以阅读.</p>

I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.

Due to the web host I am having to use inline css to style the site. (trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)

Normally I would use bootstrap to achieve this but as noted that is not an option. 

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

What I want:

解决方案

All you need to do is apply float: left to image

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

这篇关于内联 CSS 图像和段落内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆