» » >

Красивое отображение цитат в тексте
·
29.09.2013, 13:31

Всем доброго дня, я парой очень часто слышу о том, что многие читатели моего сайта хотят знать, как установить ячейку цитаты в тексте контента таким образом, чтобы текст обтекал данную ячейку.

Поэтому как и полагается смотрим демо и читаем инструкцию по установки.

Шаг 1 - Установим HTML:

Всё что вам необходимо, так это установить в текст контента ячейку div с текстом вашей цитаты:

HTML

<div class="cell-quote-1">текст цитаты</div>
Шаг 2 - Установим CSS:

А теперь устанавливаем наши css стили:

CSS-Code

.cell-quote-1{
  float:right;
  width:250px;  
  padding: 10px 15px 10px 15px;  
  background: #F4F8F9;
  margin: 5px 0px 5px 30px;  
  border-left: 2px solid #B6C0CD;
  font-style: oblique!important;  
}

.cell-quote-2{
  float:left;
  width:250px;  
  padding: 10px 15px 10px 15px;  
  background: #F4F8F9;
  margin: 5px 30px 5px 0px;  
  border-right: 2px solid #B6C0CD;
  font-style: oblique!important;  
}

Как вы видите в данном css коде, основную роль играет тег float:left; и float:right; в зависимости от первого или второго примера ячейки цитаты.

На этом всё, спасибо за внимание!

Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 614 | Загрузок: 279 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<