Создать фиксированный текст в нижней части нескольких полей с помощью CSS

Question

Я использую CSS для выравнивания текста (это просто ссылка «читать дальше») в нижней части окна предварительного просмотра, которое имеет стандартную высоту. Ссылка «читать дальше» теперь отображается чуть ниже текста тизера, и мне нужно расположить ее всего на несколько пикселей выше нижней строки поля статьи независимо от высоты текста, например,

___________________________
|
|
|
|
|
|              read more >>
|___________________________

Не могли бы вы дать мне несколько идей или примеров?

С уважением, George

Answer 1

Установите для элемента article значение position:relative, а затем установите для ссылки read more значение position:absolute, чтобы вы могли разместить его внутри статьи, используя свойства bottom / right css. ..

пример на http://www.jsfiddle.net/gaby/7bduy/

Answer 2

Если текст вашей статьи имеет фиксированный размер, сделайте что-то вроде этого:

<div class="article">
<div class="readmore"><a href="#">read more ></a>
</div>

CSS:

.article 
{
position relative;
width: 300px;
height: 100px;
}
.readmore
{
position:absolute;
z-index:3;
width:50px;
height:25px;
right:0px;
top:280px;
}

... или что-то в этом роде:)

Answer 3

Вы можете посмотреть на расположение текста относительно.

в css:

#selectorName{
    position:relative;
    left: 10px;
    top:10px;
    bottom:10px;
    right:10px;
}

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

Answer 4

Я долгое время не использовал Javascript, но прямо в разделе «Связанные» есть ссылка, которая может вам помочь: CSS: фиксированный снизу и по центру