CSS, чтобы получить несколько текстовых полей поверх изображения в разных местах

Вот моя задача: у меня есть изображение реального имущества, которое будет загружено случайным образом в DIV шириной 200 пикселей. Соответственно размер изображения будет изменен на ширину 200 пикселей и переменную высоту (с сохранением пропорциональности). У меня есть четыре отдельных подписи, которые нужно добавить к изображению:

  1. Заголовок
  2. Цена
  3. Расположение
  4. Поверхность

Они должны быть расположены соответственно вверху по центру, внизу слева, внизу слева и внизу справа от изображения. Итак, у меня было бы что-то вроде:

--------------------------------
|             Title            |
|                              |
|                              |
|Price                         |
|Location               Surface|
--------------------------------

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

Любой совет??

РЕДАКТИРОВАТЬ: Нашел решение. Для справки, вот сгенерированный код:

<div id="stampRandom">
    <img class="stampImg" src="myphoto.jpg">
    <div class="title"><span>Title</span></div>
    <div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
    <div class="surf"><span><b>Surface</span></b></span></div>                  
</div>

И CSS:

#stampRandom {
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
    color: #FFF;
    font-size: 80%;
}

#stampRandom {
    position: relative; 
    top: 0; 
    left: 0; 
    width:200px;
    color: #ffffff;
    /*    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
    font-size:80%;
}
#stampRandom img {
    top:0px;
    left:0px;
    width:200px;
}
#stampRandom div {
    position: absolute; 
    width: 200px; 
}
#stampRandom div span {
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(50, 50, 50, 0.7);
}
.title {
    top:2px;
    width:100%;
    text-align:center;
}
.prix {
    bottom:0px;
    left:0px;
}
.surf {
    bottom:0px;
    right:0px;
    text-align:right;
}

Спасибо всем, кто помог! Меня сильно заблокировали, и мой код требовал серьезной переделки. Свежий выстрел в руку!


image html css captions
person rpmth    schedule 27.10.2014    source источник
comment
И что вам нужно от нас, чтобы помочь вам с?   -  person Szymon Toda    schedule 27.10.2014
comment
Дай нам какой-нибудь код, детка.   -  person Victor    schedule 27.10.2014

Ответы (2)


arrow_upward
1
arrow_downward

http://jsfiddle.net/h51xLdzg/

<style>
.img-cont{position:relative;width:200px;}
.img-cont div{position:absolute; background:red}
.img-title{top:0px;width:100%;text-align:center;}
.img-price{bottom:0px; left:0px;}
.img-surf{bottom:0px; right:0px;text-align:right;}
</style>
<div class="img-cont">
    <img src="/MyImage.jpg" width="200"/>
    <div class="img-title">
        Title
    </div>
    <div class="img-price">
        Price Location 
    </div>
    <div class="img-surf">
        Surface
    </div>
</div>

Думаю, это поможет вам

person JNZ    schedule 27.10.2014
comment
Этот был простым и работал для образца. По какой-то причине, когда я применил его ко всем своим тегам PHP, мне пришлось добавить text-align:right; в класс img-surf, чтобы заставить его работать. - person rpmth; 27.10.2014
comment
Конечно, я просто пропустил выравнивание правого нижнего (img-surf) div. Отредактировано - person JNZ; 28.10.2014

arrow_upward
0
arrow_downward

Я сделал быстрый пример того, как вы можете это сделать. Это не идеально, но это работает. Если вам нужна другая помощь или другой подход, дайте мне знать

http://jsfiddle.net/hg9r7/134/

<div class="imageWrapper">
 <img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
 <div class="top">TOP</div>
 <div class="bot">BOT</div>
 <div class="botleft">BOTLEFT</div>
 <div class="botright">BOTRIGHT</div>
</div>

Пример CSS для нижнего и нижнего левого текста:

.bot{
 position:absolute;
 background:red;
 text-align:center;
 margin:0 auto;
 width:100px;
 left:50%;
 margin-left:-50px;
 bottom:0;
}

.botleft{
 position:absolute;
 background:red;
 text-align:center;
 margin:0 auto;
 width:100px;
 left:0;
 bottom:0;
}
person trainoasis    schedule 27.10.2014