CSS - 将图像放置在文本旁边
我正在做一个网站，其中图像需要在文本内容旁边呈现 - 一种伪两列布局，因为图像和文本来自单个 html 源。
我找到了一种非常简单的方法来做到这一点，即将图像作为它们自己的段落并浮动它们。 是否还有更简单的方法（就 html 而言）来做到这一点，而无需这些额外的段落，并且仅将额外的 css 归因于图像？
如果浮动图像与文本位于同一段落中，则带图像和不带图像的段落宽度会有所不同。
编辑：基本上，我正在寻找尽可能简单的 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>
I'm doing a site in which images need to presented next to textual content - a sort of pseudo two-column layout, as the images and text come from a single html source.
I've found quite a simple way to do this by putting the images as their own paragraphs and floating them. Would there still be a more simpler way (in regards to html) to do this without these extra paragraphs and by only attributing extra css to images?
If the floated image is in the same paragraph than the text, then paragraphs with and without images would be different in width.
EDIT: Basically, I'm looking for as simple HTML markup as possible to position images like this. The CSS can be complex ;)
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您在找这个吗？
这将匹配 p 标签内的所有 img 标签。
但我建议始终使用类或 id 来匹配 CSS 规则。 仅使用标签名称迟早会导致恼人的陷阱。
编辑
嗯，也许我误解了你的意思。 您想应用
float: right; width: 900px;到 p 元素，而不是 img 元素...据我所知，没有办法选择特定元素的父元素。 它始终按照 PARENT -> 方向工作。 孩子，不是孩子 -> 家长。
Are you looking for this?
This would match all img-tags inside p-tags.
But I recommend always using classes or ids to match CSS rules. Just using the tag name can lead to annoying pitfalls, sooner or later.
Edit
Mhm, maybe I got you wrong. You would like to apply
float: right; width: 900px;to the p-elements, not the img-elements ...AFAIK there is no way to select a parent of a specific element. It always works in direction PARENT -> CHILD, not CHILD -> PARENT.
不会。将 img 放在 p 内后，您可以将图像向右浮动，但文本不会保留在列中。 它将包裹在图像下方。 您应用于 p 的任何右边距或填充也将应用于 img。
由于您有两条相关信息，我会将它们包装在 div 中，然后将它们放置在 div 中。
No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.
Since you have two pieces of related information, I would wrap those in a div and then position them within the div.
回应艾米丽的回答。
虽然她是对的，但就她目前而言，有一个解决方法。 虽然它并不理想：
这应该将图像放在
p的右上角，同时将文本强制放入p元素的左边界和950px 右内边距。 不理想，而且有点混乱，但它允许柱状效果而不添加额外的标签。...除非您想在末尾添加一个clearfix
br(br.clearfix: display: block; clear: Both)段落（强制p标签延伸到短段落的图像之外）。In response to Emily's answer.
While she's right, as far she goes, there is a workaround. Though it's not ideal:
This should put the image in the top-right corner of the
p, while forcing the text into a column between the left boundary of thepelement and the 950px right-padding. Not ideal, and a little messy, but it allows for the columnar effect without adding extra tags....unless you want to add a clearfix
br(br.clearfix: display: block; clear: both) at the end of the paragraph (to force theptag to extend past the image for short paragraphs).是的，刚刚测试了这个，
确保使用严格的文档类型
yes, just tested this,
make sure you use the strict doctype
我在这里编写了这行代码，以帮助我将一些文本准确地定位在我想要的位置。 我可能是一个新手，但它简单、轻松、精确地完成了工作。 和所有 HTML。
您还可以使用 href 字段使文本成为超链接，或者如果这就是您现在想要的，您可以删除 href 字段，但请注意保留“
I concocted this line of code here to help me position some text exactly where I wanted it. I might be a novice way but it got the job done simply and easily and precise. and all HTML.
you can also use the href field to make your text a hyperlink or if thats now what you want you can jus delete the href field but be mindful to keep the "