使用 CSS HTML 右对齐图像答案

【问题标题】：right align an image using CSS HTML使用 CSS HTML 右对齐图像
【发布时间】：2011-07-10 01:12:42
【问题描述】：

如何使用 CSS 右对齐图像。

我不希望将文字发送到wrap-around 图像。我希望右对齐的图像本身在一条线上。

【问题讨论】：

【解决方案1】：

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>

jsFiddle.

【讨论】：

【解决方案2】：

有几种不同的方法可以做到这一点，但以下是一种方法的快速示例。

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

我在此示例中使用了内联样式，但您可以轻松地将它们放在样式表中并引用类或 ID。

【讨论】：

【解决方案3】：

将图像向右浮动，这将首先使您的文本环绕它。

然后，无论 next 元素是什么，将其设置为 { clear: right; } 并且一切都将停止环绕图像。

【讨论】：

【解决方案4】：

使图像向右移动：

float: right;

使文本不换行：

clear: right;

为获得最佳实践，请将 css 代码放入样式表文件中。添加更多代码后，它会看起来很混乱且难以编辑。

【讨论】：

【解决方案5】：

我针对此问题的解决方法是将display: inline 设置为图像元素。这样，如果您从父容器设置 text-align: right，您的图像和文本将向右对齐。

【讨论】：

电子邮件的出色解决方案，因为 Outlook 似乎不喜欢浮动。

【解决方案6】：

 img {
     display: block;
     margin-left: auto;
   }

【讨论】：

问题已经得到解答。请说明您的答案与其他答案有何不同以及它如何回答问题。
@Ani Outlook 比浮动更喜欢这个。
浮动在响应式设计中变得很棘手，并且在 dom 中需要额外的伪元素或真实元素。有了这个解决方案，代码变得简单且可维护。

【解决方案7】：

更简单/更有条理的方法是使用一些 css。

上面是CSS，下面是sn-p的HTML。

div {
  clear: right;
}


/*
img {
   float:right
}*/


/* img part is unneeded unless you want it to be a image on the right the whole time */

<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
  <h1> I support headers! </h1>
  <blockquote> And blockquotes!! </blockquote>
  and <a href="">hyperlinks!</a>
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>

</html>

【讨论】：