Question

我正在建立一个网站，其中图片需要在文本内容旁边呈现 - 一种伪的两列布局，因为图像和文本来自单个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>

Answer 1

你在找这个吗？

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

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

修改

嗯，也许我弄错了。您想将float: right; width: 900px;应用于p元素，而不是img-elements ...

AFAIK无法选择特定元素的父级。它总是在PARENT - ＆gt;方向上工作。孩子，不是孩子 - ＆gt; PARENT。

Answer 2

没有。使用p中的img，您可以向右浮动图像，但文本不会保留在列中。它将包裹在图像下方。您应用于p的任何右边距或填充也将适用于img。

由于您有两条相关信息，我会将它们包装在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>

Answer 3

回应Emily的回答。

没有。有了im里面的img，你可以向右浮动图像但文本不会留在专栏中。它会包裹在图像下方。没事您应用于p的边距或填充也适用于img。

虽然她是对的，但就她而言，有一个解决方法。虽然它不理想：

p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }

img {position: absolute; top: 0; right: 0; }

这应该将图像放在p的右上角，同时将文本强制转换为p元素的左边界与950px右边距之间的列。不理想，有点乱，但它允许柱状效果，而无需添加额外的标签。

... 除非您要在段落末尾添加clearfix br（br.clearfix: display: block; clear: both）（以强制p标记扩展超过图片的简短段落。）

Answer 4

是的，刚试过这个，确保使用严格的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>

Answer 5

我在这里编写了这行代码，以帮助我将一些文本准确定位到我想要的位置。我可能是一个新手，但它完成了简单，容易和精确的工作。和所有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>

你也可以使用href字段使你的文字成为超链接，或者如果你现在想要你可以jus删除href字段，但要注意保持＆＃34;

<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>

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

5 个答案: