7

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

5 回答 5

10

你在找这个吗？

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

这将匹配 p-tags 中的所有 img-tags。但我建议始终使用类或 id 来匹配 CSS 规则。仅使用标签名称迟早会导致烦人的陷阱。

编辑

嗯，也许我误会了你。您想申请float: right; width: 900px;p-elements，而不是 img-elements ...

AFAIK 无法选择特定元素的父级。它总是朝着 PARENT -> CHILD 的方向工作，而不是 CHILD -> PARENT。

于 2009-06-30T21:37:18.903 回答
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>
于 2009-06-30T21:48:56.163 回答
1

回应艾米丽的回答。

不。使用 p 中的 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标签延伸到短段落的图像之外）。

于 2009-06-30T22:15:33.177 回答
1

是的，刚刚测试了这个，确保你使用严格的文档类型

<!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>
于 2010-05-29T20:31:58.507 回答
-1

我在这里编写了这行代码来帮助我将一些文本准确地定位在我想要的位置。我可能是一个新手，但它可以简单、轻松、准确地完成工作。和所有的 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 字段将您的文本设置为超链接，或者如果这就是您现在想要的，您可以删除 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>
于 2014-09-07T18:54:11.570 回答