Автоматические две колонки с 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 может подсчитать, сколько < p> есть в содержимом div, а затем переместить вторую половину из них, чтобы плавать прямо на основании этого? Может быть? Следует принять во внимание советы: D

Answer 1

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

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

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

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

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

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

Answer 4

Here's a JQuery plugin, которая делает столбцы автоматически, и даже может варьировать количество столбцов основанный на размере экрана.

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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