Я пытаюсь создать колонки в стиле газеты, используя блок текста. Я бы хотел, чтобы текст был равномерно распределен по 2 столбцам, которые могли бы реагировать на изменение длины в тексте.
Можно ли использовать только HTML/CSS, если бы не использовать javascript?
Спасибо
Две заметки:
Итак, я полагаю, что JS - ваш лучший выбор, но он не будет работать для пользователей с отключенным JS, конечно.
Если вы решите сделать это, это уже возможно в Mozilla и WebKit (и Prince) только с CSS:
selector {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
Это в спецификации CSS3, а Moz/Webkit уже реализован с префиксами поставщиков. Используйте свойства column-count и column-gap:
#container {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
Обратите внимание, что, конечно, они не поддерживаются ни одной версией IE, которую использует любой пользователь. CanIUse.com утверждает, что IE 10 будет поддерживать его как часть CSS3.
CSS3 предоставляет способ превратить любой контент HTML node в любое количество столбцов. Существуют свойства для управления количеством столбцов, а также их шириной, относительной высотой ( "заполнение" или разделом содержимого по существующим столбцам), желобом между столбцами, "правилом" (разделительной линией или границей) и т.д.
В качестве отправной точки см. справочную страницу w3schools.com CSS3 Multiple Columns.
Однако, как обычно, IE только среди широко используемых браузеров не поддерживает свойства столбца CSS3.
Одно кросс-браузерное решение - это плагин JQuery для столбцов.
CSS3 позволит вам сделать это с помощью многоколоночной поддержки, но на данный момент вы, вероятно, не можете полагаться на очень много браузеров для его поддержки, поэтому вам, вероятно, придется полагаться на альтернативный метод.
Я согласен с PhiLho. Если вы все еще хотите попробовать, код js, разделяющий ваш контент на два столбца, довольно прост, если столбцы имеют фиксированную ширину. Сложный бит решает, где разделить контент. Вы, вероятно, не хотите разбивать середину слова и т.д.
Вы можете попробовать со следующим сценарием: добавьте два столбца на свою страницу. Поместите текст в первый столбец (это позволяет браузерам, не поддерживающим js, по-прежнему отображать ваш контент). Получите текст с помощью js (например, из события onload). Найдите следующий индекс ".". (или если у вас есть параграфы "</p> " ), начиная с середины. Используйте этот индекс, чтобы разбить текст и перенести первую часть в первый столбец и так далее...
Здесь простая (не CSS дружественная) функция javascript, которая сделает это:
function Newspaperize(elem)
{
var halflength = elem.innerText.length / 2;
var col1 = elem.innerText.substring(0, halflength);
var col2 = elem.innerText.substring(halflength);
elem.innerHTML = '<TABLE WIDTH=100%><TR>' +
'<TD WIDTH=50% VALIGN=TOP>' + col1 + '</TD>' +
'<TD VALIGN=TOP>' + col2 + '</TD>' +
'</TR></TABLE>';
}
Поместите текст в обычный элемент где-нибудь и вызовите Newspaperize (yourelement), когда страница загружается.
Примечание: эта функция просто разделяет текст пополам. Чтобы действительно работать правильно, вам нужно найти пробел или дефис, ближайший к средней точке, и разделить текст там.
IHT имеет хорошую реализацию формата 3 colums. Однако, похоже, он подсчитан на стороне сервера, я думаю, подсчитав слова.
Как говорили другие - не то, что возможно с ванильным CSS/XHTML (по крайней мере - пока мы не получим широко распространенный CSS3: -)
Однако, одетый в мою шляпу для пользователей, меня бы интересовал ваш случай использования, если вы захотите этого на веб-странице (предполагая, что это обычная веб-страница, на которую вы нацеливаете). В отличие от расщепления печати блок текста поверх двух столбцов может затруднить чтение. Если это длиннее экрана, тогда пользователю приходится делать много прокрутки вверх и вниз для сканирования/чтения всего.
Итак, даже если вы можете сделать это с некоторыми хаками JS, может быть, лучше придумать альтернативный дизайн, который ему не нужен.
Итак, я искал ответ на этот вопрос, к сожалению, сначала я действительно не нашел его, а теперь через 3 часа я это сделал.
Я нашел JavaScript-библиотеку, которая использует атрибуты css3 (если я понял это правильно, только попытался заставить ее работать, и это произошло, я буду читать в js позже)
lib найдено здесь: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column
Единственным недостатком является то, что текст, который вы хотите иметь многоколоновым, должен находиться между двумя тегами (я предпочитаю использовать тег <p>, так как он также поддерживает несколько тегов <p>).
проверил его в ff 3.6, т.е. 8, опера 10.51 и хром 4.1. Я не в состоянии проверить старые браузеры, поэтому я рекомендую, чтобы кто-то это сделал в ближайшее время; P
ура!
Мне удалось сделать что-то подобное, но опять же, а не в CSS, я использовал PHP для подсчета слов и разделения текста. К сожалению, подсчет слов - довольно плохой способ сделать это, поскольку некоторые слова длиннее других, а столбцы не совпадают. Мой дизайн был вдохновлен веб-сайтом IHT. Это не очень сложно реализовать в PHP.