html - 向下移动/微移文本而不是图像

Question

你好大师:我正在尝试一些东西，但就是不明白理论......我有一个主要的 Div，里面有:段落文本和一张图像(这两个都嵌套在它们自己的 Div 中)(充满希望我做对了!)

为了便于可视化....它们都位于 html 页面的顶部，图像的样式为 float: right;文本可以设置样式，但这就是我挂断的地方。

----- 我想将 TEXT ONLY 从它的位置移开；从页面顶部向下，如 50px-----

当我用 padding 或 margin 设置文本样式时，它会占用一切；文本和图像，并将所有内容一起向下移动....我怎样才能将图像留在当前位置，而只是向下移动文本，在文本上方的顶部留下空白而不是图像？

这是一种定位风格吗？还是我在想这一切都错了？非常感谢您的帮助!!

Answer 1

html:

<div class="wrapper">
    <div><img src="blah" class="img-right" /></div>
    <div><p>some text</p></div>
</div>

CSS:

.wrapper div p {
    position: absolute //can also be relative, depending on your needs
    top: 50px
}
.img-right {
    float: right
}

位置可以是相对的或绝对的，具体取决于您需要如何设置页面样式。

另见:

http://www.w3schools.com/cssref/pr_class_position.asp