Позиционирование в нижней части динамического DIV

Это то, что я пытаюсь достичьПозиционирование в нижней части динамического DIV

http://i.stack.imgur.com/e9xZa.jpg

Я попробовал этот

jsfiddle.net/RUSm3/

, но как вы можете увидеть совпадения даты на изображении.

Поэтому я добавил налево: 215px на дату

jsfiddle.net/9aw29/

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

источник

2010-10-31 sasa

Если у вас есть DIV как этот

<div class="container"> 
    <div class="date">today</div> 
</div>

с этим фрагментом CSS ваша дата DIV будет позиционироваться в нижнем правом углу это контейнер.

.container { 
     position:relative; 
    width: 100px; 
    height: 180px; 
    border: solid 1px black; 
} 
.date { 
     bottom:10px; 
     position:absolute; 
     right:10px; 
    }

Вы можете проверить его работу here

источник

2010-10-31 19:26:20 Lorenzo

Спасибо за образец! Однако мне нужно выровнять дату влево. Если я сделаю это, он будет перекрываться на изображении, и если я использую 'right: 200px' для выравнивания справа от изображения, он будет слишком отступом, когда нет изображения. – sasa

@sasa: если вы предоставите больше своего кода разметки, мы можем попытаться соответствующим образом отрегулировать образец. Я просто сделал это так, потому что я не знаю вашей разметки – Lorenzo

ОК извините. Я покажу весь код. – sasa

Я не уверен, что ваша разметка, но самое простое решение будет иметь заголовок, текст и дату все в одном div (внутри .entry), и плавайте изображение влево, если оно есть. Дата будет позиционирована так же, как вы уже сделали в своем примере. Когда изображение отсутствует, весь div будет двигаться влево.

<div class="entry"> 
    <img [...] /> 
    <div> 
    <h2>Heading</h2> 
    <p>Entry text</p> 
    <p class="date">[Date]</p> 
    </div> 
</div>

источник

2010-10-31 19:26:31 stephenhay

thx! Я пробовал это, но дата будет располагаться в нижней части div, которая может иметь более или менее текст. Если я положу его в div раздела, он всегда будет на далеком дне, но я не знаю, как его изменить, если нет изображения. – sasa

Если честно, я бы просто пошел дальше и делаю это по-своему, но использую PHP или JavaScript для добавления класса, когда есть изображение. Этот класс может иметь позицию с левой стороны через CSS. Я знаю, что вы хотели избежать этого, но использование php JavaScript сделает его действительно динамичным. – stephenhay

Вот что я придумал и, вероятно, буду хорошей отправной точкой для вас. Короче говоря, оберните две текстовые области в свои собственные div и оберните их в родительский div. Поплавьте родительский div вправо и сделайте его положение чем-то иным, чем статическим. Если позиция статична, вы не можете использовать положение: абсолютный атрибут с его дочерними div.

<style type="text/css"> 
    div.entry{ 
     float: left; 
     position: relative; 
     width: 40%; 
    } 
    img.left{ 
     float: left; 
    } 
    div.right{ 
     float: right; 
     display: inline; 
     position: absolute; 
     height: 100%; 
     width: 50%; 
    } 
    div.topRight{ 
    } 
    div.bottomRight{ 
     position: absolute; 
     bottom: 0px; 
    } 
</style> 




<div class="entry"> 
    <img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/> 
    <div class="right"> 
     <div class="topRight"> 
      Some stuff 
     </div> 
     <div class="bottomRight"> 
      Some other stuff 
     </div> 
    </div> 
</div>

источник

2010-10-31 20:38:04 Hersheezy

Позиционирование в нижней части динамического DIV

ответ

Смежные вопросы