0

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

我对文本使用 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

我怎样才能放置文本或去掉这个尾巴，以便将下一个图像放置在下面？

4

1 回答 1

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，而不是段落。

编辑 2以进一步明确：您在那里所做的是将与其父 div 相关的段落定位，而不是 div 本身。

于 2013-10-03T13:17:04.600 回答