图片上的文本百分比html css

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

我对文本使用css规则（position:relative；top:-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>

我希望我解释得足够好。另附图片：

---

如何放置文本或去掉此尾部，以便将下一幅图像放置在下方？

在文本div中使用position:absolute有什么问题？我会这样做，只要记住将文本div嵌套到图像所在的同一个div中，并将容器div位置设置为relative

“tail”的原因，我认为，是因为它是一个相对定位的div，所以它在文档流中占据了一个初始空间，不管它的顶部边缘是什么，您通过“top”css属性来更改它。也许可以尝试

边距顶部

，这样可以移动整个div

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

编辑：事实上，我没有注意到您正在设置段落的top属性，而不是div。请检查此处：

现在，尝试将

top

更改为

margintop

：）

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

---

编辑2为了更清晰：你在那里做的是将段落定位在与其父div相关的位置，而不是div本身。

啊，尾部是白色区域，p应该在那里。

.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%;
}