Как без переносов сделать так, чтобы ссылка «Read more» лежала справа внизу блока?

Question

[Faust]

Вот по-подробнее в картинках, как я хочу сделать:


-----------------------------------------------------------------------------------------------------------------------------------


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

Answer 1

[Serj-One]

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

.block{
  width: 200px;
  height: 200px;
  background: #bebebe;
  position: relative;
}

.more{
  position: absolute;
  right: 10px;
  bottom: 10px;
}

codepen.io/anon/pen/qbyxgz

Comments

[Faust]

Спасибо огромное))

[Serj-One]

Fuad Shukurov: В качестве "спасибо" здесь есть кнопка "отметить решением"

Answer 2

[Faust]

Не получается опять же, что же я не так сделал не пойму, вот HTML код:

<div class="block block-about">
				<div class="heading"><div class="square"></div><h2>About WhiteSquare</h2></div>
				<img src="images/sample.png">
				<div class="block-content">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. 
				<br>
				<span><a href="#" class="readmore">Read more</a></div></span>
</div>

Можете пожалуйста написать как это должно быть в CSS коде для этого именно блока?

Comments

[shurupkirov]

код без примененных стилей ничего не даст. для помощи нужен живой пример

[Serj-One]

Добавил в свой ответ код.

[Faust]

shurupkirov: но все равно, вы могли бы просто написать самый простой код, а все остальное я бы сам сверяя понял бы, и нашел что тут у меня лишнее, какой стиль мешает коду и т.д.

Answer 3

[Григорий]

Зачем такое вообще нужно? Будет же пустая область под коротким текстом!

Нужно делать через js или css (flexbox) одинаковую высоту у соседних блоков и ставить ссылку вниз через position:absolute;