2010-10-06

Textual description of firstImageUrl

Как разбить текст на 2 и 3 колонки

   Для того, чтобы сделать свою запись более компактной, можно разбить ее на 2 столбца, или колонки. Достичь этого можно несколькими способами.
Способ первый при помощи тега <div>:
подставляем текст правой и левой колонок в следующую формулу:
<div style="float: left; width: 49%;">Текст левой колонки</div><div style="float: right; width: 49%;">Текст правой колонки</div><div class="clear">
В результате получим:
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки

текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки

Второй способ - табличный. С его помощью можно разбить текст на 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>
Вот, что у нас получилось:

P.S. на blogspote лучше обойтись без ветикальной черты, она отображается не корректно.
3 способ похож на предыдущий. Единственным отличием является способ задания разделительной черты. так как в некоторых блогосервисах не все коды отражаются адекватно, то предложу вам и этот вариант. Вот как он выглядит:
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки

текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки

Код:
  <table border=0 cellpadding=0 cellspacing=10><tr>
<td valign=top>текст левой колонки</td><td width=1 bgcolor=#000000><hr noshade align="center" width="3" size="50"></td><td valign=top>текст правой колонки</td></tr>
</table>

Разбиваем текст на 3 колонки:

1 колонка 2 колонка 3 колонка

Разбиваем текст на 3 колонки html

<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 колонки с помощью div

текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки
текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки
текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки
Код:
<div style="float: left; width: 100%">
<div style="float: left; width: 33%">Текст 1</div>
<div style="float: left; width: 33%">Текст 2</div>
<div style="float: left; width: 33%">Текст 3 </div>
</div>
<div style="clear: both"></div>

Текст на 4 колонки:

текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки
текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки
текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки
текст 4 колонки текст 4 колонки текст 4 колонки текст 4 колонки текст 4 колонки

Код:
<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>
Таким образом, чтобы разделить текст на колонки в html, нужно указать ширину каждой колонки в процентах (width: N%). Для этого делим 100% на количество колонок или задаем свои начения и прописываем столько строчек <div style="float: left; width: 25%">Текст 3 </div>, на сколько колонок разбит наш текст

22 комментария :

Анонимный комментирует...

хорошая тема.......еще скрипты прикрути сюда на сайт, особенно аяксы всякие, в сети я видел где-то сайт на англ..... сайт на аякс- это будущее инета

Анонимный комментирует...

просто красавчик! от души!!!!!!!!

Mycrib комментирует...

Тогда уж - красавица =)))

Тем кому интересно. комментирует...

спаибки оч помог способ 1

Анонимный комментирует...

Спасибо большое за коды! Очень пригодились!

Lidiya Waite комментирует...

Спасибо за коды. Открыла учебник, там только горизонтальный разделитель. Хвала интернету и добрым людям, которые делятся знаниями

Денис комментирует...

»Тогда уж - красавица =)))

Ну вообще офигеть теперь :)

Первый способ решил проблему сразу же! Спасибо!

Nick Barabanov комментирует...

первый способ очень красивый!
А как сделать ТРИ колонки??

Иванова Наталья комментирует...

Nick, ответила на ваш вопрос, дополнив запись

Дмитрий Суричев комментирует...

а где таг, что статья от нуба нубу )))
все что тут предложено - АЗБУКА позиционирования элементов. Таким образом можно все что угодно.
А вот где материал про текст по колонкам ?????? его та тут и нет (((((( пойду дальше гуглить. Вообщето на это есть то-ли таг, то ли ЦСС свойство спецовое, без ЭТИХ выкрутасов.

Анонимный комментирует...

А как разделитель убрать, но колонки оставить?

Иванова Наталья комментирует...

Без вертикальной черты:
<table cellspacing="10" cellpadding="0" border="0"><tbody>
<tr>
<td valign="top">1 колонка</td>

<td valign="top">2 колонка</td>
</tr>
</tbody></table>

vasenchenko комментирует...

Благодарю автора за своевременное предоставление информации, как создать 3 колонки на сайте с адаптивным дизайном.

Анонимный комментирует...

Спасибо за информацию, помогла!

Djannet комментирует...

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

Иванова Наталья комментирует...

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

Super Sanek комментирует...

Спасибо за статью, очень все просто и понятно , нужно пробовать теперь)

Super Sanek комментирует...

коды рабочие, проверено на prkwood.ru!
Один вопрос - при разбитии на колонки текста появляется фон у колонок - это в стилях править или можно как то в этом же коде (html) указать? через div все ок!

Иванова Наталья комментирует...

Можно добавить стили выше вашего кода вида:

<style>здесь код css для таблиц</style>
и прописать стили таблиц внутри.

Егоров Николай и его семья. комментирует...

Спасибо Вам огромное! Пригодилось. А главное без лишней воды

Иванова Наталья комментирует...

Рада, что пригодилось)

Unknown комментирует...

Здорово, конечно.
Но в мобильной версии хорошо бы в одну колонку, чтоб это перестраивалось.

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности