Как разместить текст в конце предыдущего блока текста?

Мы используем CMS, которая ограничивает мою способность редактировать HTML. У меня есть абзац текста, а затем по ссылке:Как разместить текст в конце предыдущего блока текста?

Lorem Ipsum боль сидеть Амет, consectetur adipisicing Элит, СЕПГА сделать eiusmodtempor incididunt ет Лабор.

Нажмите здесь

Наш дизайнер предпочел бы иметь «Нажмите здесь» ссылка появится непосредственно в конце абзаца текста:

Lorem Ipsum боль сидеть Амет, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore. Нажмите здесь

Можно ли поместить ссылку с помощью CSS, так что он всегда появляется в конце предыдущего абзаца? Вот HTML произведенный нашей CMS:

<div class="item summary"> 
    <div class="content"> 
     <p> 
      Lorem ipsum... 
     </p> 
    </div> 
</div> 
<div class="item link"> 
    <div class="content"> 
     <a href="http://www.example.com">Click here</a> 
    </div> 
</div>

источник

2015-04-21 CalvinH

Для этого, чтобы работать, в основном все ваши элементы (Div, р, а) должны быть встроенные или инлайн-блочные элементы.

http://jsfiddle.net/mkeyh93f/

div.item{ 
    display: inline; 
} 

div.item p, div.item div, div.item a{ 
    display: inline; 
}

Просто убедитесь, что вы также не имеют каких-либо отступов по умолчанию и поля на ваших элементов. Я бы также предложил обернуть все это в контейнере div или статьи с дисплеем: block;

источник

2015-04-21 18:40:54 tribe84

ты меня опередил :) –

Спасибо. Это * будет * работать, но наша CMS использует (и наши консультанты) такой запутанный беспорядок вложенных и разделяемых классов, поэтому я не могу заставить его работать, не разбивая кучу других вещей. Но спасибо за ваш быстрый ответ! – CalvinH

Как последнее обновление, мне удалось выполнить эту работу. Наши вещи все еще запутаны, но ваше решение сработало. Опять же, спасибо. – CalvinH

Вы можете установить

float: right;

в вашей ссылке пункт. Или используйте макет таблицы.

Совет. Не устанавливайте пробелы в именах классов css ("itemLink").

источник

2015-04-21 18:46:32

Если возможно изменение ДИВ, чтобы охватить или в CSS, добавить

.item, .item.content, .item.content p, 
.item.summary .item.link {display: inline;} 
.item.summary item.link .content {display: inline;}

Это изменит поведение сНу element.m, который является своего рода анти-интуитивным. DIVs являются семантическими делениями, и поэтому сделать div-действие, подобное диапазону, не рекомендуется. Используйте его только как последнее средство

источник

2015-04-21 18:47:51 Ronnie

Существует один способ сделать это с помощью jquery. Надеюсь, что это поможет вам некоторые ватты, так как мы не можем настроить css. Мы можем использовать его с помощью JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".link").each(function(){ 
     var a=$(this).children(".content").html(); 
$(this).siblings(".summary").children(".content").children("p").append(a); 
    }); 
    $(".item.link").remove(); 
}); 
</script>

И никаких изменений в содержании HTML не попробовать это и дайте мне знать, если эта функция работает или нет

источник

2015-04-21 18:58:41

Как разместить текст в конце предыдущего блока текста?

ответ

Смежные вопросы