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

Question

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

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 мог бы подсчитать, сколько

есть в div контента, а затем переместить вторую половину из них, чтобы они всплыли прямо на основании этого? Может быть? Советы будут оценены: D

Answer 1

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

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

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

Answer 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 будет ужасно ухудшаться.

Answer 3

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

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

Answer 4

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

Answer 5

Поддерживается только в расширении Mozilla CSS: -moz-column-count. Смотри: https://developer.mozilla.org/en/CSS3_Columns

Answer 6

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

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

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

Answer 7

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

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