图片上的文字百分比html css

Question

我有两张图片，一张向左浮动，另一张向右浮动。它们的高度相同，但宽度不同。我需要将文本放在第一张图片上（浮动到左侧）。

我对文本使用 css 规则（位置：相对；顶部：-20em；），它可以工作，但它会将尾部留在文本的初始位置，所以如果我想放置第二行带文字的图片，行有间隙。

我不想使用position:absolute，因为会有第二和第三行有图片和文字。

<div class="rightDiv picDiv"><img src="pics/about.jpg" width="100%"/>  </div>
<div class="leftDiv textDiv"> <img src="pics/yellow.jpg" width="100%"/>
<p>some text some text </p>
    </div>

<div class="leftDiv picDiv"><img src="pics/about.jpg" width="100%"/>  </div>
<div class="rightDiv textDiv"> <img src="pics/yellow.jpg" width="100%"/><p>another     text another text</p></div>

和css：

.rightDiv{
float:right;
}

.leftDiv{
float:left;
}

.picDiv{
width:58.5660377%;
height:58.3333333%;
}

.textDiv{
width:38.7924528%;
height:58.3333333%;
}

.textDiv p{
position:relative;
top: -20em;
height:58.3333333%;
padding:0 3% 0 1%;
text-align:right;
font-size: 120%;
}

我希望我解释得很好。附上图片：

http://maria.talvi.com/screenshot.jpg

如何放置文字或去掉这条尾巴，以便将下一张图片放在下方？

Answer 1

您对在文本 div 中使用 position: absolute 有何顾虑？我会这样做，只要记住将文本 div 嵌套到图像所在的同一 div 中，并将容器 div 位置设置为相对。

我认为“尾巴”的原因是，由于它是一个相对定位的 div，它在文档流中占据了一个初始空间，无论它的顶部边缘是什么，您正在通过“顶部”CSS 属性。也许试试margin-top，这应该会移动整个div。

或者，您也可以将图像用作容器 div 的背景图像，并将文本放入该容器中。但是，如果您要响应，则需要在 css 中进行其他调整。

编辑：实际上我没有注意到您正在设置段落的顶部属性，而不是 div。在这里查看：http://codepen.io/anon/pen/woCyl

现在，尝试将 top 更改为 margin-top :)

你应该定位封闭的 div，而不是段落。

EDIT 2 进一步明确：您在此处所做的是将与其父 div 相关的段落定位，而不是 div 本身。