圖片百分比html css上的文字

Question

我有兩張圖片，一張漂浮在左邊，另一張漂浮在右邊。 它們具有相同的高度，但寬度不同。 我需要在第一張圖片（浮動到左側）上放置文字。

我對文本使用了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中的絕對值有什么擔心？ 我會那樣做，只記得將文本div嵌套到圖像所在的div中，並將該容器div的位置設置為相對。

我認為“尾巴”的原因是，由於它是一個相對定位的div，因此它占據了文檔流中的初始空間，無論其頂部邊緣是什么，您都可以通過“頂部” css進行更改屬性。 也許嘗試使用margin-top ，那應該移動整個div。

或者，您也可以將圖像用作容器div的背景圖像，只需將文本放入該容器中。 如果您要做出響應，則需要在CSS中進行其他調整。

編輯：實際上，我沒有注意到您正在設置段落的top屬性，而不是div。 在這里檢查： http : //codepen.io/anon/pen/woCyl

現在，嘗試將top更改為margin-top :)

您應該放置封閉的div，而不是段落的位置。

EDIT 2為進一步清晰起見：您在此處所做的操作是將段落放置在與其父div相關的位置，而不是div本身。