Как разбить текст на 2 и 3 колонки
Содержание
Способ первый при помощи тега <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
Код:
<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 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 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>, на сколько колонок разбит наш текст
хорошая тема…….еще скрипты прикрути сюда на сайт, особенно аяксы всякие, в сети я видел где-то сайт на англ….. сайт на аякс- это будущее инета
просто красавчик! от души!!!!!!!!
Тогда уж — красавица =)))
спаибки оч помог способ 1
Спасибо большое за коды! Очень пригодились!
Спасибо за коды. Открыла учебник, там только горизонтальный разделитель. Хвала интернету и добрым людям, которые делятся знаниями
»Тогда уж — красавица =)))
Ну вообще офигеть теперь 🙂
Первый способ решил проблему сразу же! Спасибо!
первый способ очень красивый!
А как сделать ТРИ колонки??
Nick, ответила на ваш вопрос, дополнив запись
а где таг, что статья от нуба нубу )))
все что тут предложено — АЗБУКА позиционирования элементов. Таким образом можно все что угодно.
А вот где материал про текст по колонкам ?????? его та тут и нет (((((( пойду дальше гуглить. Вообщето на это есть то-ли таг, то ли ЦСС свойство спецовое, без ЭТИХ выкрутасов.
А как разделитель убрать, но колонки оставить?
Без вертикальной черты:
<table cellspacing="10" cellpadding="0" border="0"><tbody>
<tr>
<td valign="top">1 колонка</td>
<td valign="top">2 колонка</td>
</tr>
</tbody></table>
Благодарю автора за своевременное предоставление информации, как создать 3 колонки на сайте с адаптивным дизайном.
Спасибо за информацию, помогла!
А как быть, если в колонках разное количество строк? У меня в левой на пару строк больше, чем в правой. И дальнейший текст, который должен идти под колонками на всю ширину сайта, начинается в конце правой колонки.
не помогает.
Разбейте табличным способом, и не будет разницы сколько строк в колонках.
Спасибо за статью, очень все просто и понятно , нужно пробовать теперь)
коды рабочие, проверено на prkwood.ru!
Один вопрос — при разбитии на колонки текста появляется фон у колонок — это в стилях править или можно как то в этом же коде (html) указать? через div все ок!
Можно добавить стили выше вашего кода вида:
<style>здесь код css для таблиц</style>
и прописать стили таблиц внутри.
Спасибо Вам огромное! Пригодилось. А главное без лишней воды
Рада, что пригодилось)
Здорово, конечно.
Но в мобильной версии хорошо бы в одну колонку, чтоб это перестраивалось.
Очень здорово!) Спасибо Наталья!! если у Вас будет время могли бы Вы поделиться как поделить содержимое страницы табличным способом?
СПАСИБО ОЧЕНЬ ПОМОГ, УДАЧИ И УСПЕХОВ ВО ВСЕМ!
К сожалению они не адаптивные, не сьезжают вниз (
Круть, спасибо!! Очень помогли!!