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

  • Решено Pasha.

    (@pasha-1)


    12 лет, 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)

    12 лет, 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)

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

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

    Автор Pasha.

    (@pasha-1)

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

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

    grebnev

    (@grebnev)

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

    ну надо смотреть html вокруг данного куска.

    Автор Pasha.

    (@pasha-1)

    12 лет, 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)

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

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

    Вот это меня смущает. height: 100%; Попробуйте в инспекторе кода отключить.
    А по идее все нормально.

    Автор Pasha.

    (@pasha-1)

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

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

    grebnev

    (@grebnev)

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

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

    Автор Pasha.

    (@pasha-1)

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

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

    grebnev

    (@grebnev)

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

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

    Автор Pasha.

    (@pasha-1)

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

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

Просмотр 11 ответов — с 1 по 11 (всего 11)
  • Тема «Выравнивание "читать далее" справа снизу» закрыта для новых ответов.