процент текста на картинке html css

Question

процент текста на картинке html css

0

У меня два изображения: один плавает влево, другой - вправо. Они имеют одинаковую высоту, но разную ширину. Мне нужно поместить текст на первое изображение (которое плавает влево).

Я использую правило CSS для текста (position: relative; top: -20em;), оно работает, но оно оставляет хвост, где начальная позиция текста была, так что, если я хочу разместить вторую строку фото с текст, строки имеют пробел.

Я не хочу использовать позицию: абсолютный, потому что будет вторая и третья строки с картинками и текстом.

<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

Как я могу поместить текст или отнять этот хвост, чтобы следующие изображения были помещены ниже?

user2839061 03 окт. 2013, в 15:16

Источник

Теги:

html

css

image

text

1 ответ

Ещё вопросы

MrMerrick · Answer 1 · 2013-10-03T11-29-00.000Z

Какова ваша забота об использовании позиции: абсолютная в ваших текстовых divs? Я бы сделал это так, просто не забудьте положить этот текстовый div в один и тот же div, где находится изображение, и установить, что позиция div контейнера относительно.

Я считаю, что причиной "хвоста" является то, что, поскольку это относительный позиционированный div, он занимает начальное пространство в потоке документа, независимо от того, каким может быть его верхний край, который вы изменяете через "верхний" css имущество. Возможно, вместо этого попробуйте margin-top, который должен переместить весь div.

Или вы также можете использовать изображение в качестве фонового изображения контейнера div и просто поместить текст внутри этого контейнера. Это потребует других корректировок в css, если вы будете реагировать, хотя.

EDIT: На самом деле я не заметил, что вы устанавливаете верхнее свойство абзаца, а не div. Проверьте здесь: http://codepen.io/anon/pen/woCyl

Теперь попробуйте изменить top на margin-top :)

Вы должны расположить прилагаемый div, а не абзац.

EDIT 2 для дополнительной ясности: то, что вы делаете, есть позиция, связанная с ее родительским div, а не с самим div.

Ах, хвост - это белая область, где бы был р.