Поддержка Проблемы и решения Выравнивание "читать далее" справа снизу

  • Решено Pasha.

    (@pasha-1)


    есть вот такой блок:

    <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)
  • Для контента задайте 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;
    }

    как-то так

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

    Автор Pasha.

    (@pasha-1)

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

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

    Автор Pasha.

    (@pasha-1)

    <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;
    }

    Вот более подробно

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

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

    Автор Pasha.

    (@pasha-1)

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

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

    Автор Pasha.

    (@pasha-1)

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

    Автор Pasha.

    (@pasha-1)

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

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