Как разбить текст на 2 и 3 колонки
Рейтинг:
/ 0
Подставляем текст правой и левой колонок в следующую формулу:
<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>
Вот, что у нас получилось:
Разбить текст на 3 колонки с помощью table
| 1 колонка | 2 колонка | 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 колонки с помощью 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 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 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>, на сколько колонок разбит наш текст