CSS - 在文本旁边定位图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1066188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Positioning images next to text
提问by Philippe Gerber
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.
我正在做一个网站，其中图像需要在文本内容旁边显示 - 一种伪两列布局，因为图像和文本来自单个 html 源。
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?
我找到了一种非常简单的方法，通过将图像作为自己的段落并将它们浮动。如果没有这些额外的段落并且只将额外的 css 归因于图像，是否还有更简单的方法（关于 html）来做到这一点？
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 ;)
编辑：基本上，我在寻找简单的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>
回答by Philippe Gerber
Are you looking for this?
你在找这个吗？
p img { float: right; width: 900px; }
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.
这将匹配 p-tags 中的所有 img-tags。但我建议始终使用类或 ID 来匹配 CSS 规则。仅使用标签名称迟早会导致恼人的陷阱。
Edit
编辑
Mhm, maybe I got you wrong. You would like to apply float: right; width: 900px;to the p-elements, not the img-elements ...
嗯，也许我误会了你。您想应用于float: right; width: 900px;p 元素，而不是 img 元素 ...
AFAIK there is no way to select a parent of a specific element. It always works in direction PARENT -> CHILD, not CHILD -> PARENT.
AFAIK 无法选择特定元素的父元素。它始终适用于 PARENT -> CHILD，而不是 CHILD -> PARENT。
回答by Emily
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.
不。使用 p 中的 img，您可以将图像向右浮动，但文本不会停留在列中。它将环绕在图像下方。您应用于 p 的任何右边距或填充也将应用于 img。
Since you have two pieces of related information, I would wrap those in a div and then position them within the div.
由于您有两条相关信息，我会将它们包装在一个 div 中，然后将它们放置在 div 中。
.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}
<div class="info">
<img src="image.jpg" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
回答by David says reinstate Monica
In response to Emily's answer.
回应艾米丽的回答。
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.
不。使用 p 中的 img，您可以将图像向右浮动，但文本不会停留在列中。它将环绕在图像下方。您应用于 p 的任何右边距或填充也将应用于 img。
While she's right, as far she goes, there is a workaround. Though it's not ideal:
虽然她是对的，但就她而言，有一个解决方法。虽然它并不理想：
p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }
img {position: absolute; top: 0; right: 0; }
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 the pelement and the 950px right-padding. Not ideal, and a little messy, but it allows for the columnar effect without adding extra tags.
这应该将图像放在 的右上角p，同时将文本强制放入p元素左边界和 950 像素右填充之间的列中。不理想，有点凌乱，但它允许在不添加额外标签的情况下实现柱状效果。
...unlessyou want to add a clearfix br(br.clearfix: display: block; clear: both) at the end of the paragraph (to force the ptag to extend past the image for short paragraphs).
...除非您想在段落末尾添加 clearfix br( br.clearfix: display: block; clear: both)（以强制p标签超出短段落的图像）。
回答by hndcrftd
yes, just tested this, make sure you use the strict doctype
是的，刚刚对此进行了测试，请确保使用严格的文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>
<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
回答by Nikoan Johnson
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.
我在这里编造了这行代码来帮助我将一些文本准确定位到我想要的位置。我可能是一个新手，但它完成了简单、轻松和精确的工作。和所有的 HTML。
<a href="http://elonmusk.com" STYLE="position:absolute; TOP: 24px; LEFT:50px;">put your txt in here and use the Top and Left values to position the text precisely where you want it</a>
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 "
您还可以使用 href 字段使您的文本成为超链接，或者如果这就是您现在想要的，您可以删除 href 字段，但请注意保留“
<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
