使用 CSS HTML 右对齐图像
Posted
技术标签:
【中文标题】使用 CSS HTML 右对齐图像【英文标题】：right align an image using CSS HTML 【发布时间】：2011-07-10 01:12:42 【问题描述】：如何使用 CSS 右对齐图像。
我不希望将文字发送到wrap-around 图像。我希望右对齐的图像本身在一条线上。
【问题讨论】：
【参考方案1】：<img style="float: right;" 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" 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" 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>【讨论】：
以上是关于使用 CSS HTML 右对齐图像的主要内容，如果未能解决你的问题，请参考以下文章