html - 图片百分比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>

和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

如何放置文字或去除尾巴，以便将下一张图像放置在下方？

最佳答案

您对使用位置：文本div中的绝对值有何关注？我会那样做，只记得将文本div嵌套到图像所在的div中，并将该容器div的位置设置为相对。

我认为“尾巴”的原因是，由于它是一个相对定位的div，因此它占据了文档流中的初始空间，无论其顶部边缘是什么，您都可以通过“顶部” css进行更改属性。也许尝试margin-top代替，那应该移动整个div。

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

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

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

您应该放置封闭的div，而不是段落的位置。

编辑2为了更清晰：您在此处所做的操作是将段落放置在与其父div相关的位置，而不是div本身。