Автоматически два столбца с CSS или JavaScript

В настоящее время я разрабатываю веб-сайт, и мой клиент хочет, чтобы текст различных статей переполнялся на два столбца. Как нравится в газете? Таким образом, это будет выглядеть так:

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.

[моя действительно плохая попытка придумать что-нибудь написать]

Есть ли способ сделать это с помощью только CSS? Я бы предпочел не использовать несколько div. Я также открыт для использования JavaScript, но, к сожалению, я плохо знаю, поэтому помощь будет оценена. Я подумал, может быть, JavaScript может подсчитать, сколько <p> есть в содержимом div, а затем переместить вторую половину из них, чтобы плавать прямо на основании этого? Может быть? Полезны советы: D

ОТВЕТЫ

Ответ 1

Хорошей новостью является то, что есть только CSS-решение. плохая новость заключается в том, что в существующих браузерах нет никакой значительной поддержки. если бы он был реализован, он выглядел бы так:

div.multi {
  column-count: 3
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Я думаю, на данный момент ваш лучший выбор - вероятно, серверная сторона, о которой упоминается монооксид

Ответ 2

Я бы, наверное, справился с этим в своем бэкэнде, что бы это ни случилось. Пример в PHP может выглядеть так:

$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);

Вероятно, возможно было бы сделать что-то подобное в JavaScript с помощью InnerHTML, но лично я бы избегал этой ситуации, потому что все больше людей используют плагины, такие как NoScript, который отключает JavaScript, пока он явно не разрешен для x-сайта, и над чем-либо еще, div и CSS были разработаны для того, чтобы ухудшиться красиво. В этом случае решение JavaScript ухудшилось бы ужасно.

Ответ 3

Здесь плагин JQuery, который автоматически выполняет столбцы и может даже изменять количество столбцов на основе размера экрана.

Я не использовал это сам, но проверьте его.

Ответ 4

Если вы используете Mootools, вы можете проверить MooColumns.

Ответ 5

Во-первых, я не думаю, что просто css может это сделать, но я хотел бы, чтобы меня доказали неправильно.

Во-вторых, просто подсчет абзацев не поможет вам вообще, вам нужно, по крайней мере, все высоты и вычислить середину высоты текста на основе этого, но вам придется учитывать изменение размера окна и т.д. Думаю, что существует довольно простое решение для полки. К сожалению, я пессимистичен в поиске идеального решения этой проблемы, но это интересно.

Ответ 6

Это сложно сделать в HTML/CSS/JS по какой-то причине (хотя я уверен, что это возможно).

Газеты используют несколько столбцов, чтобы уменьшить ширину линии, чтобы текст стал более читаемым. Это хорошо на бумаге, потому что, когда вы заканчиваете один столбец, вы поворачиваете свой глаз до начала следующего.

В Интернете мы используем прокрутку, чтобы текст продолжался за границами экрана, поэтому колонки не нужны.