Разделение HTML на несколько столбцов с помощью Javascript / jQuery

Question

Примечание. Это альтернативный плановый подход к этому вопросу: Несколько статей в Joomla

У меня есть клиент, которому нужен многостолбцовый макет, который должен генерироваться автоматически из HTML-блока без колонок.

Какова целесообразность использования JavaScript (и jQuery) для создания многоколоночной системы из одного блока HTML? И если это возможно, как бы я поступил так?

Спасибо.

Answer 1

Это всего лишь пример того, как вы можете решить свою проблему. Конечно, это решение может быть улучшено.

function textSplitter(){
}

textSplitter.prototype.LENGTH_TO_SPLIT=5000 //max chars in single line

textSplitter.prototype.split=function(id){
    var contentDiv=document.getElementById(id); // get an element
    var text=contentDiv.innerHTML; 
    var length= text.length; 
    if(length){
        var div1sbstr=text.substring(0,this.LENGTH_TO_SPLIT); //take a substring
        var div1=document.createElement("div");
        contentDiv.appendChild(div1); // append it
    }
    if(length>this.LENGTH_TO_SPLIT){
        var div2sbstr=text.substring(this.LENGTH_TO_SPLIT,this.LENGTH_TO_SPLIT*2);
        var div2=document.createElement("div");
        contentDiv.appendChild(div2);
    }
    if(length>this.LENGTH_TO_SPLIT*2){
        var div3sbstr=text.substring(this.LENGTH_TO_SPLIT*2,this.LENGTH_TO_SPLIT*3);
        var div3=document.createElement("div");
        contentDiv.appendChild(div3);
    }
}

Answer 2

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

<ul>
   <li class="col1">Eggs</li>
   <li class="col1">Ham<li>
   <li class="col2 top">Bread<li>
   <li class="col2">Butter<li>
   <li class="col3 top">Flour<li>
   <li class="col3">Cream</li>
</ul>

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

Весь код взят из Smashing Magazine - Полное руководство по использованию отрицательных полей .