CSS – 将图像定位在文本旁边

前端之家收集整理的这篇文章主要介绍了CSS – 将图像定位在文本旁边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在做一个网站,其中图像需要在文本内容旁边呈现 – 一种伪的双列布局,因为图像和文本来自单个html源.

通过将图像作为自己的段落并浮动它,我发现了一种非常简单的方法.如果没有这些额外的段落并且仅将额外的CSS归因于图像,是否仍然有更简单的方法(关于html)?

如果浮动图像与文本在同一段落中,则带有和不带图像的段落的宽度将不同.

编辑:基本上,我正在寻找尽可能简单的HTML标记来定位像this这样的图像.CSS可能很复杂;)

CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }


Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>


Is the above possible with this HTML?
<p><img src="image.jpg" /></p>

解决方法

你在找这个吗?
p img { float: right; width: 900px; }

这将匹配p-tags内的所有img-tag.
但我建议始终使用类或ID来匹配CSS规则.只是使用标签名称迟早会导致烦人的陷阱.

编辑

嗯,也许我搞错了.你想申请float:right;宽度:900px;对于p元素,而不是img元素……

AFAIK无法选择特定元素的父级.它总是在PARENT – >方向上工作.孩子,不是孩子 – >父母.

猜你在找的CSS相关文章