html - 图片上的文字百分比 html css

Question

我有两张图片，一张漂浮在左边，另一张漂浮在右边。它们具有相同的高度，但宽度不同。我需要将文本放在第一张图片上( float 到左侧)。

我为文本使用了一个 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

我怎样才能放置文本或去掉这条尾部，以便下一张图片放在下面？

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 本身。