Разместим текст в несколько колонок
Разместим текст в две колонки. Что бы было веселее читать пост я позаимствовал стишок http://kievforum.org/showthread.php?t=1183. ( не рекламы ради, а гуглю спасибо :))) )
Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган
Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...
Неоднозначно, непонятно, не всегда,
Не видя, как опять бегут года,
Просаживая сутки напролет,
Мы ждем, когда же время то придет.
Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...
Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...
Это можно было бы сделать таблицей, но есть вариант проще - использовать div.
Попробуем разместить каждый стих в своем диве
В примере кода я не указал что бы было проще читать код, а при выводе добавлю рамку к каждому диву
Вот что получится
Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган
Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...
Неоднозначно, непонятно, не всегда,
Не видя, как опять бегут года,
Просаживая сутки напролет,
Мы ждем, когда же время то придет.
Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...
Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...
Во первых ширина дивов равна максимальной ширине, а во вторых они размещены не рядом, а друг под другом
Зададим ширину дивов добавив стиль width, для того что бы дивы размещались рядом, а не друг под другом нужно к каждому диву добавить стиль float: left это выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
Вот теперь мы получили 2 колонки
Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган
Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...
Неоднозначно, непонятно, не всегда,
Не видя, как опять бегут года,
Просаживая сутки напролет,
Мы ждем, когда же время то придет.
Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...
Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...
Что дальше делать с колонками зависит только от Вашей фантазии :). Можно добавить фоновый рисунок прописав в стиле background: url('ссылка на фоновый рисунок'), выравнивание в каждой колонке можно делать любым прописав в стиле каждого дива text-align: left, center, right
Пример кода колонок, размещенных в начале поста
Если суммарная ширина колонок будет больше чем максимальная ширина поста, то дивы разместяться не рядом, а друг под другом
Что бы разместить колонки по центру нужно добавить <center> и еще один общий див с шириной равной суммарной ширине колонок со всеми отступами и бордерами
Должно получиться вот так
Helena_Way.
...
Volschebnik
