HTML/CSS 如何格式化文本并在其旁边浮动一个图像答案

【问题标题】：HTML/CSS How to format Text and have an Image floating next to itHTML/CSS 如何格式化文本并在其旁边浮动一个图像
【发布时间】：2013-05-18 01:28:33
【问题描述】：

我的 HTML 和 CSS 技能相当生疏，我以前做过这个，但忘记了如何做。

我在页面左侧有文本，我希望在此 div 右侧旁边有一个图像，浮动在那里并且不会干扰文本格式。

Text Description.....
Description..........
Description..........                             Image Goes About Here
Description..........
Description..........

有谁知道如何做到这一点？谢谢。

【问题讨论】：

是的，将 float: right; 添加到以图像为目标的 css 中。除非您的标记更复杂，但由于您没有发布任何内容，因此这里没有人知道。
为了将来参考，请发布您需要帮助的代码。我们希望看到您尝试实现的目标，而不仅仅是为您完成。谢谢...

标签： html css image formatting css-float

【解决方案1】：

简单的解决方案是使用 display: inline-block 在图像旁边显示信息，而无需添加内联 css。

img, p {
   display: inline-block;

}


<img src="image.png" />
 <p>
 text left
 </p>

【讨论】：

【解决方案2】：

使用填充和浮动...

即

<div id="container">
  <div id="text" style="padding-right: <image-width+few px>">
     text text text
     text text text
  </div>
  <img src="<imagesrc" style= "float:right" />
</div>

填充，使文本不与图像重叠。这应该会给你想要的效果。在图像之后，添加一个带有 clear:both 的 div 以返回使用该 div 的所有暗淡。

【讨论】：

【解决方案3】：

例如
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>

已编辑

【讨论】：

我强烈建议您避免在 html 文档中包含样式信息。 html 用于内容。 css 文件用于样式布局。最好添加一个类，这样您就可以轻松调整布局，而无需修改原始 html 文档。