Выравнивание "читать далее" справа снизу

Решено Pasha.
(@pasha-1)

10 лет, 6 месяцев назад
есть вот такой блок:
```
<article>
     <?php the_content(); ?>
     <div class="continue">
          <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>">
               Далее...
          </a>
     </div>
</article>
```
И такие стили
```
article {
     min-height: 210px;
     position: relative;
}

.continue {
     position: absolute;
     right: 5px;
     bottom: 5px;
}
```
В блоках, где текста много всё нормально, но в блоках, где текста мало ссылка «Читать далее» идет сразу же под текстом, а надо, чтобы она была справа снизу в блоке. Подскажите, пожалуйста, как это реализовать и почему так не работает?

Просмотр 11 ответов — с 1 по 11 (всего 11)

grebnev
(@grebnev)

10 лет, 6 месяцев назад
Для контента задайте min-height.
```
<article>
     <div class="content">
         <?php the_content(); ?>
     </div>
     <div class="continue">
          <a>#more-<?php the_ID(); ?>">
               Далее...
          </a>
     </div>
</article>
```
```
.content{
    min-height: 200px;
}
```
как-то так
grebnev
(@grebnev)

10 лет, 6 месяцев назад

Простите, я напутал. У вас уже и так все в порядке.

Автор Pasha.
(@pasha-1)

10 лет, 6 месяцев назад

Может код и в порядке, но отображается неправильно 🙁
http://itmag.es/5mcoV
вверху неправильно из-за маленького кол-ва текста, внизу правильно из-за большого кол-ва текста.

grebnev
(@grebnev)

10 лет, 6 месяцев назад

ну надо смотреть html вокруг данного куска.
Автор Pasha.
(@pasha-1)

10 лет, 6 месяцев назад
```
<section class="post">
     <header>
          <h1>
               <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
          </h1>
          <span class="time"><?php the_time(('d.m.y')) ?></span>
     </header>
     <article>
          <?php the_content(); ?>
          <div class="continue">
	       <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>">Далее...</a>
	  </div>
     </article>
</section>
```
```
section.post header {
	width: 646px;
	height: 25px;
	padding: 5px 27px 5px 23px;
}

section.post header h1 a {
	font-size: 24px;
	color: #efefef;
	float: left;
	position: relative;
	bottom: 5px;
}

section.post header span {
	font-size: 17px;
	color: #efefef;
	vertical-align: baseline;
	float: right;
}

section.post {
	min-height: 210px;
}

section.post article {
	width: 646px;
	height: 100%;
	padding: 20px 27px 10px 23px;
}

section.post article {
	padding-bottom: 40px;
	position: relative;
}

section.post article a.more-link {
	display: none;
}

.continue {
	padding: 5px;
	position: absolute;
	bottom: 5px;
	right: 5px;
}
```
Вот более подробно
grebnev
(@grebnev)

10 лет, 6 месяцев назад
```
section.post article {
	width: 646px;
	height: 100%;
	padding: 20px 27px 10px 23px;
}
```
Вот это меня смущает. height: 100%; Попробуйте в инспекторе кода отключить.
А по идее все нормально.
Автор Pasha.
(@pasha-1)

10 лет, 6 месяцев назад

К сожалению, ничего не изменилось 🙁

grebnev
(@grebnev)

10 лет, 6 месяцев назад

Если есть ссылка на сайт, то давайте.
По этой ссылке http://itmag.es/5mcoV нет ничего кстати.

Автор Pasha.
(@pasha-1)

10 лет, 6 месяцев назад

перезалил
http://storage7.static.itmages.ru/i/12/1111/h_1352652824_1827928_b85593ccb2.png

grebnev
(@grebnev)

10 лет, 6 месяцев назад

а вы киньте html этой картинки. и весь сss.

Автор Pasha.
(@pasha-1)

10 лет, 6 месяцев назад

Ну шестое сообщение и есть полный код. В общем спасибо за помощь, но проблему удалось решить тем, что добавил к классу continue стили width: 100%; clear: both

Просмотр 11 ответов — с 1 по 11 (всего 11)

Тема «Выравнивание "читать далее" справа снизу» закрыта для новых ответов.

Метки темы

Просмотр