Как писать текст 2 и 3 колонки в статье на Blogger

Как писать текст  2 и 3 колонки в статье на Blogger
Приветствую. Сегодня мне необходимо было разбить текст на несколько колонок. Но на Blogger эта функция не предусмотрена и мне пришлось спасаться при помощи тегов html

Способы писать текст  2 и 3 колонки в статье на Blogger

Есть два способа разделить текст в статье на Blogger с помощью тегов

  1. при помощи тега <div>
  2. при помощи тега <table>

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

Как писать текст  2 и 3 колонки в статье на Blogger

Сейчас используем первый способ написания двух колонок при помощи тега <div>

Пишем текст 2 и 3 колонки на Blogger с помощью тега <div>


Для того, чтоб разделить текст на две колонки, переходим в редактор html и вставляем в необходимое место код

<div style="float: left; width: 49%;">Текст левой колонки</div><div style="float: right; width: 49%;">Текст правой колонки</div><div class="clear">
 То, что выделено цветным, вставляете свои данные. Таким образом можно поделить на 3,4,5 колонок. Но обязательно нужно прописывать процентное соотношение колонок.


Мне теперь не до игрушек -
Я учусь по букварю,
Соберу свои игрушки
И Сереже подарю.


Деревянную посуду
Я пока дарить не буду.
Заяц нужен мне самой -
Ничего, что он хромой






Если необходимо перевести строку: используем тег <br> как в моем примере

Пишем текст 2 и 3 колонки на Blogger с помощью тега <table>

Как я уже писала выше, этот вариант будет больше похож на таблицу. Вернее это и будет таблица.

Используем следующий код для 2 колонки:
<table border=0 cellpadding=0 cellspacing=10><tr>
<td valign=top>1 колонка</td><td width=1 bgcolor=#000000><img src=1x1.gif width=1 height=1></td><td valign=top>2 колонка</td></tr>
</table>

Вот что у Вас получится
Как писать текст  2 и 3 колонки в статье на Blogger
Как писать текст  2 и 3 колонки в статье на Blogger
Теперь меняем код и пишем без вертикальной черты на 3 колонки
<table cellspacing="10" cellpadding="0" width="100%" border="0"><tbody>
    <tr>
      <td valign="top" width="30%">1 колонка</td>
      <td valign="top" width="30%">2 колонка</td>
      <td valign="top" width="30%">3 колонка</td>
    </tr>
  </tbody></table>
Вот и результат - 3 колонки в статье на Blogger
А медведь измазан слишком...
Куклу жалко отдавать:
Он отдаст ее мальчишкам
Или бросит под кровать.
Паровоз отдать Сереже?
Он плохой, без колеса...
И потом, мне нужно тоже
Поиграть хоть полчаса!
Мне теперь не до игрушек -
Я учусь по букварю...
Но я, кажется, Сереже
Ничего не подарю.

Нужно больше колонок? Добавляем в код и исправляем процентное соотношение колонок.
Например так:

<div style="float: left; width: 100%">
  <div style="float: left; width: 25%">Текст 1</div>
  <div style="float: left; width: 25%">Текст 2</div>
  <div style="float: left; width: 25%">Текст 3 </div>
<div style="float: left; width: 25%">Текст 4 </div>
</div>
<div style="clear: both"></div>
Смысл понятно, пробуйте.
Как всегда ваша Nata Lee и мой канал Инфишка в Телеграм

Комментариев нет:

Отправить комментарий

Спасибо Вам за то, что поделились статьей в социальных сетях!