Текст в два столбика

четверг, 20 мая 2010

15:24

все записи пользователя в сообществе ArLe

Вопрос: Как сделать текст в два столбика?

Ответ: Вот так:

<div style="float: left; width: 49%;">Текст левой колонки</div><div style="float: right; width: 49%;">Текст правой колонки</div><div class="clear">

Получится:

Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки Текст левой колонки

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

@темы: Теги оформления записи

URL

...подняли зарплату ;) так как подорожал проезд на автобу... ... прямо таки зверски... Ложусь рано в 22:30 - 23:30... ... Спокойно, друзья мои, я не об етом. Я как раз о самых чт...

Ето штуки тоже занятные, так как периодически разговарива... Классная штука - sHit-парад по MTV! Уж насколько я презир... ужас, в пятницу жутко нос чесался, но болела голова. Выпи...

Комментарии

20.05.2010 в 15:40

молчаливая. как ты любишь

한 걸음 더 가까이에

спасибо
вот это очень нужная информация!

URL

20.05.2010 в 15:45

Ksunny

Отпечатки наших пальцев на жизнях, которых мы касаемся, не тускнеют.

ооо!!!!!!!!!!! спасипбо большое!!!!!!!!!

URL

20.05.2010 в 16:14

MeryDay

Да у меня практически нет недостатков :)

огромное спасибо) :red:

полезная инфа.

URL

20.05.2010 в 16:17

Shendary

- За мной пришел чертов жнец! - Чертовы жнецы приходят за всеми, Бобби.

Большое спасибо! :red:

URL

20.05.2010 в 17:47

@темы: Теги оформления записи
Не совпадает пост

URL

20.05.2010 в 17:54

ArLe
у вас в коде не хватает последней закрывающей </div> ;-)

URL

20.05.2010 в 19:55

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

ninelya, по моему, его можно не закрывать.

URL

20.05.2010 в 20:02

belomoeff
не знаю. У меня закрывай-не закрывай, все равно глючит. Как - скрины позже покажу.

URL

20.05.2010 в 20:17

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

ninelya, ну, можно в качестве альтернативы воспользоваться <br style="clear: all;">

URL

20.05.2010 в 20:45

belomoeff
к сожалению, та же фигня((

Исходная запись:

Я попыталась разделить списки на две колонки, и вот что у меня получилось:

Множественные <br> перед следующим блоком не помогают. Что не так с моим кодом?
код

 <a href="http://www.crossroad-blues.net/forum/viewforum.php?f=46" target=_blank><b>Байки из склепа</b> - <b>2</b></a>

<u>День 1:<b>     РПФ АУ — Перевод</b> (джен, гет или слэш)</u>
<div style="float: left; width:8%;"><div align="right"><b>Ангелы:</b>
<b>Демоны:</b>
<i>Бонус:</i>
<b>Люди:</b>
<i>Бонус:</i>
<b></b></div></div><div style="float: right; width:91%;"><a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1453" target=_blank>Близко к сердцу</a> от <span class="ljuser with-alias-value ljuser-name_audrarose" style="white-space: nowrap"><a href="http://audrarose.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://audrarose.livejournal.com/" target=_blank><b>audrarose</b></a></span> (J2, NC-17).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1444" target=_blank>Королевская гвардия</a> от <span class="ljuser with-alias-value ljuser-name_aramuin" style="white-space: nowrap"><a href="http://aramuin.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://aramuin.livejournal.com/" target=_blank><b>aramuin</b></a></span> (J2, R, макси, action/drama/romance).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1446" target=_blank>Сладкие мечты навсегда</a> от <span class="ljuser with-alias-value ljuser-name_dark_reaction" style="white-space: nowrap"><a href="http://dark_reaction.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://dark_reaction.livejournal.com/" target=_blank><b>dark_reaction</b></a></span> (J2, NC-17, миди).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1452" target=_blank>Апокалипсис: Отменен</a> от <span class="ljuser with-alias-value ljuser-name_jeyhawk" style="white-space: nowrap"><a href="http://jeyhawk.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://jeyhawk.livejournal.com/" target=_blank><b>jeyhawk</b></a></span> (Джаред/Дженсен, NC-17, АU).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1454" target=_blank>Небесные картины</a> от <span class="ljuser with-alias-value ljuser-name_idri" style="white-space: nowrap"><a href="http://idri.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://idri.livejournal.com/" target=_blank><b>idri</b></a></span> (Романс, Херт/комфорт, Ангст, АУ РПС, намеки на наркоманию и алкоголизм, Джаред/Дженсен, ПОВ Джареда).</div>

<u>День 2: <b>СПН-Арт — Тема "Переключая каналы"</b> (любой арт по канону)</u>
<div style="float: left; width:8%;"><div align="right"><b>Ангелы:</b>
<b>Демоны:</b>
<i>Бонус:</i>
<b>Люди:</b>
<i>Бонус:</i></div></div><div style="float: right; width:91%;"><a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1459" target=_blank>Welcome to Castiel's channel</a> (G).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1463" target=_blank>Недетские мультики</a> (PG-7).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1464" target=_blank>Channel surfing</a> (G).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1457" target=_blank>Переключая каналы</a> (PG-13).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1458" target=_blank>I win. So, I win</a> (PG-13).</div><div style="clear: all;"></div>
 
<u>День 3: <b>Ретейлинг — Авторский фик или перевод</b> (джен, гет или слэш)</u>
<b>Ангелы:</b> <a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1469" target=_blank>Путеводная звезда</a> (Дин/Кастиэль, PG-13, сказка, ретейлинг фильма «Звездная пыль»).
<i>Бонус:</i> <a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1470" target=_blank>Законы и следствия</a> (Дженсен/Джаред, романс, PG-13, ретэйлинг фильма «Законы привлекательности»).
<b>Демоны:</b> <a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1471" target=_blank>Пепельные города</a> от <span class="ljuser with-alias-value ljuser-name_hkath" style="white-space: nowrap"><a href="http://hkath.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://hkath.livejournal.com/" target=_blank><b>hkath</b></a></span> (J2, R, Чад/Пэрис Хилтон, мат, ретейлинг фильма «Последний вечер»).
<b>Люди:</b> <a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1467" target=_blank>Сердце Анкарии</a> (Дженсен/Джаред, R, AU, намёки на гет, по сюжету игры «Sacred Underworld»).

ЗЫ: ФайрФокс 3.6.3, WinXP SP3

URL

20.05.2010 в 21:20

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

Значит, нужно использовать <div class="clear">

ninelya, Ваш примерВаш пример:

 <a href="http://www.crossroad-blues.net/forum/viewforum.php?f=46" target=_blank><b>Байки из склепа</b> - <b>2</b></a>

<u>День 1:<b>     РПФ АУ — Перевод</b> (джен, гет или слэш)</u>
<div style="float: left; width:8%;"><div align="right"><b>Ангелы:</b>
<b>Демоны:</b>
<i>Бонус:</i>
<b>Люди:</b>
<i>Бонус:</i></div></div><div style="float: right; width:90%;"><a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1453" target=_blank>Близко к сердцу</a> от <span class="ljuser with-alias-value ljuser-name_audrarose" style="white-space: nowrap"><a href="http://audrarose.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://audrarose.livejournal.com/" target=_blank><b>audrarose</b></a></span> (J2, NC-17).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1444" target=_blank>Королевская гвардия</a> от <span class="ljuser with-alias-value ljuser-name_aramuin" style="white-space: nowrap"><a href="http://aramuin.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://aramuin.livejournal.com/" target=_blank><b>aramuin</b></a></span> (J2, R, макси, action/drama/romance).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1446" target=_blank>Сладкие мечты навсегда</a> от <span class="ljuser with-alias-value ljuser-name_dark_reaction" style="white-space: nowrap"><a href="http://dark_reaction.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://dark_reaction.livejournal.com/" target=_blank><b>dark_reaction</b></a></span> (J2, NC-17, миди).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1452" target=_blank>Апокалипсис: Отменен</a> от <span class="ljuser with-alias-value ljuser-name_jeyhawk" style="white-space: nowrap"><a href="http://jeyhawk.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://jeyhawk.livejournal.com/" target=_blank><b>jeyhawk</b></a></span> (Джаред/Дженсен, NC-17, АU).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1454" target=_blank>Небесные картины</a> от <span class="ljuser with-alias-value ljuser-name_idri" style="white-space: nowrap"><a href="http://idri.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://idri.livejournal.com/" target=_blank><b>idri</b></a></span> (Романс, Херт/комфорт, Ангст, АУ РПС, намеки на наркоманию и алкоголизм, Джаред/Дженсен, ПОВ Джареда).</div><div class="clear">
<u>День 2: <b>СПН-Арт — Тема "Переключая каналы"</b> (любой арт по канону)</u>
<div style="float: left; width:8%;"><div align="right"><b>Ангелы:</b>
<b>Демоны:</b>
<i>Бонус:</i>
<b>Люди:</b>
<i>Бонус:</i></div></div><div style="float: right; width:90%;"><a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1459" target=_blank>Welcome to Castiel's channel</a> (G).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1463" target=_blank>Недетские мультики</a> (PG-7).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1464" target=_blank>Channel surfing</a> (G).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1457" target=_blank>Переключая каналы</a> (PG-13).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1458" target=_blank>I win. So, I win</a> (PG-13).</div><div class="clear">
 
<u>День 3: <b>Ретейлинг — Авторский фик или перевод</b> (джен, гет или слэш)</u>
<div style="float: left; width:8%;"><div align="right"><b>Ангелы:</b>
<i>Бонус:</i>
<b>Демоны:</b>
<b>Люди:</b></div></div><div style="float: right; width:90%;"><a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1470" target=_blank>Законы и следствия</a> (Дженсен/Джаред, романс, PG-13, ретэйлинг фильма «Законы привлекательности»).
 <a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1471" target=_blank>Пепельные города</a> от <span class="ljuser with-alias-value ljuser-name_hkath" style="white-space: nowrap"><a href="http://hkath.livejournal.com/profile" target=_blank><img class="ContextualPopup" src="http://static.diary.ru/userdir/9/0/0/1/900143/53632631.gif" alt="[info]" style="vertical-align: bottom; border: 0pt none; padding-right: 1px" height="16px;" width="16px;"></a><a href="http://hkath.livejournal.com/" target=_blank><b>hkath</b></a></span> (J2, R, Чад/Пэрис Хилтон, мат, ретейлинг фильма «Последний вечер»).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1467" target=_blank>Сердце Анкарии</a> (Дженсен/Джаред, R, AU, намёки на гет, по сюжету игры «Sacred Underworld»).
<a href="http://www.crossroad-blues.net/forum/viewtopic.php?f=46&t=1469" target=_blank>Путеводная звезда</a> (Дин/Кастиэль, PG-13, сказка, ретейлинг фильма «Звездная пыль»).</div><div class="clear">

ArLe, нужно поправить

URL

20.05.2010 в 21:22

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

ninelya, в действии:

читать дальше

URL

20.05.2010 в 21:25

belomoeff
спасибо :kiss:

URL

20.05.2010 в 23:13

Чудеснов

молодой динамично развивающийся

ArLe clear:all?

URL

21.05.2010 в 00:32

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

Чудеснов, это моя бага )

URL

21.05.2010 в 03:59

Перехватчик

Тупой ум восходит к истине через материальное.

div должен быть закрыт: </div>.

Чем плох вариант с "<table>"

URL

21.05.2010 в 13:12

ArLe

ninelya спасибо! Добавила.

URL

21.05.2010 в 13:15

ArLe

Так, не путайте меня тут ))

<div style="float: left; width:49%;">Левый левый левый левый </div><div style="float: right; width:49%;">Правый правый правый правый </div>

Левый левый левый левый левый левый левый левый левый левый левый левый левый левый левый

Правый правый правый правый правый правый правый правый правый правый правый правый правый правый правый

URL

21.05.2010 в 23:24

Шерри Холмс

Дракон интернетов

Скажите, пожалуйста, а в три колонки как можно сделать? Я немного поковыряла, но у меня не получается =(

URL

22.05.2010 в 00:17

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

<div style="float: left; width: 32%;">Текст левой колонки</div><div style="float: right; width: 32%;">Текст правой колонки</div><div style="margin-left: 33%; margin-right: 33%;">Текст средней колонки</div><div class="clear"></div>

Левый левый левый левый левый левый левый левый левый левый левый левый левый левый левый

Правый правый правый правый правый правый правый правый правый правый правый правый правый правый правый

Средний средний средний средний средний средний средний средний средний

URL

22.05.2010 в 00:21

Шерри Холмс

Дракон интернетов

belomoeff, спасибо!

URL

22.05.2010 в 00:47

Чудеснов

молодой динамично развивающийся

ну, блин, верните очищающий блок! clear:both же

URL

22.05.2010 в 00:52

belomoeff

ἓν οἶδα ὅτι οὐδὲν οἶδα

Поддерживаю. Иначе форматирование текста, который может следовать за колонками, может быть нарушено.

URL

23.05.2010 в 05:55

Kim | Psy

Ммм... сча посмотрим...

URL

27.05.2010 в 09:29

ArLe

belomoeff вернула.

URL

05.06.2010 в 21:34

Zelmedv

Вот текст в две колонки при помощи таблицы

<table width=100%  cellpadding=15>
<tr><td width=40%>
текст левой колонки 
<td width=60%>
текст правой колонки 
</table>

текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки текст левой колонки

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

URL