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

Question

我正在做一个网站,其中图像需要在文本内容旁边呈现 - 一种伪的双列布局,因为图像和文本来自单个html源.

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

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

编辑:基本上,我在寻找简单的HTML标记,尽可能定位像图像这样.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>

Answer 1

你在找这个吗？

p img { float: right; width: 900px; }

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

编辑

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

AFAIK无法选择特定元素的父级.它总是在PARENT - > CHILD,而不是CHILD - > PARENT方向上工作.