문제

내가 사용하는 ColdFusion 을 채우 템플릿을 포함하는 HTML 목록(<ul>'s).

대부분의 이러한되지 않는 긴지만,몇 가지고 엄청나게 긴 길이와 수 있을 정말 스탠드 2-3 개의 열이 있습니다.

이 HTML, ColdFusion 나마 JavaScript (나는 jQuery`사용할 수)방법을 이렇게 쉽게?그것은 일부 복잡한 오버 헤비급 솔루션을 저장하는 몇 가지 스크롤한다.

도움이 되었습니까?

해결책

그래서 나를 파는 이 문서 목록에서 떨어져 CSS Swag:멀티 열 목록.결국 사용하는 첫 번째 해결책,그것은 최고의 그러나 다른 사람을 필요로 사용하거나 복잡한 HTML 할 수 없는 동적으로 생성되거나 만들의 많은 사용자 지정 클래스를 할 수 있는지만 필요한 것의 부하에 온라인 스타일과 가능성이 큰 페이지입니다.

다른 솔루션은 여전히 환영합니다 하지만입니다.

다른 팁

는 경우 사파리 파이어 폭스 지원은 당신을 위해 충분히 좋은가,CSS 솔루션:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

는 오페라도 있습니다.

이 없는 순수한 CSS/HTML 을 달성하는 방법으로,이고 있는 것으로 알고 있습니다.당신의 최선의 방법 것에서 그것을 할 사전 처리(if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

다른 옵션을 사용하여,자바 스크립트(나는 익숙하지 않은 jQuery 도서관이 특별히)하는 것을 반복하여 나열하는,아마도 그들을 기반으로는 특정 클래스의 수녀,그리고 만약 그것이 충분히 높은 수를 동적으로 새로 만들고 목록을 한 후,첫 번째 전송하는 일부의 수는 목록 항목하는 새로운 목록입니다.로 구현하는 열을,당신은 아마 그들을 떠 왼쪽 다음 요소는 스타일 clear: left 나 clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}
<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">

나는 이와 jQuery-그것은 크로스-플랫폼 그리고 최소한의 코드입니다.

선택하 UL,복제,삽입한 후에 이전 UL.다음과 같습니다.

$("ul#listname").clone().attr("id","listname2").after()

이본의 목록 후에 이전 하나입니다.는 경우 원래의 목록과 함께 스타일 float:left,그들은 나타나야 합니다.

다음 삭제할 수 있습니다 심지어 물품에서 왼쪽 목록과 이상한 항목의 오른쪽에서 목록.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

지금 당신은 당신이 왼쪽에서 오른쪽 두 열의 목록입니다.

더 많은 열을 사용하고 싶 .slice(begin,end) 그리고/또는 :nth-child 선택합니다.ie,21LIs 수 .slice(8,14) 새로 만드 UL 삽입 후 원 UL 를 선택한 다음,원래 UL 및 삭제를 리튬의 선택 ul :gt(8).

도 Bibeault/츠에 책 jQuery 그것은 훌륭한 리소스입니다.

여기에는 변형에 휠의 예를 사용하여(Jquery):

var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.

감사 휠!

다음 JavaScript 코드에서 작동합 Spidermonkey 및 Rhino,실행하고 그에 E4X 노드-즉,이에 대해서만 사용 server-side 자바스크립트,하지만 그것을 줄 수 있는 누군가가기 위한 시작점을 jQuery 버전입니다.(이것은 매우 유용하게 서버 측에서 그러나 내가 필요로 하지 않았다는 클라이언트에서 심하게 충분을 실제로 구축합니다.)

function columns(x,num) {
    num || (num = 2);
    x.normalize();

    var cols, i, j, col, used, left, len, islist;
    used = left = 0;
    cols = <div class={'columns cols'+num}></div>;

    if((left = x.length())==1)
        left = x.children().length();
    else
        islist = true;

    for(i=0; i<num; i++) {
        len = Math.ceil(left/(num-i));
        col = islist ? new XMLList
                     : <{x.name()}></{x.name()}>;

        if(!islist && x['@class'].toString())
            col['@class'] = x['@class'];

        for(j=used; j<len+used; j++)
            islist ? (col += x[j].copy()) 
                   : (col.appendChild(x.child(j).copy()));

        used += len;
        left -= len;
        cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
    }
    return cols;
}

당신이 그것을 부과 같은 columns(listNode,2) 에 대한 두 개의 열을,그리고 그것:

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

으로:

<div class="columns cols2">
  <div class="column">
    <ul class="foo">
      <li>a</li>
      <li>b</li>
    </ul>
  </div>
  <div class="column collast">
    <ul class="foo">
      <li>c</li>
    </ul>
  </div>
</div>

그것이 의미하는 것으로 사용 CSS 다음과 같다:

div.columns {
    overflow: hidden;
    _zoom: 1;
}

div.columns div.column {
    float: left;
}

div.cols2 div.column {
    width: 47.2%;
    padding: 0 5% 0 0;
}

div.cols3 div.column {
    width: 29.8%;
    padding: 0 5% 0 0;
}

div.cols4 div.column {
    width: 21.1%;
    padding: 0 5% 0 0;
}

div.cols5 div.column {
    width: 15.9%;
    padding: 0 5% 0 0;
}

div.columns div.collast {
    padding: 0;
}

는 것은 대부분의 사람들은 잊어버리는 것은 그 때 부동 <li/> 품의 모든 항목이 있을 것 같은 높이 또한 열을 얻기 시작 구타.

이후 서버를 사용하면 언어를,나의 권고 사용하는 것입니다 CF 분할 목록으로 3 배열입니다.다음을 사용할 수 있습니다 외부 ul 을 감싸 안 3 ul 그래서 다음과 같:

<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">  
<cfset container = []>  
<cfset container[1] = []>  
<cfset container[2] = []>  
<cfset container[3] = []>  

<cfloop list="#thelist#" index="i">  
    <cfif i mod 3 eq 0>  
        <cfset arrayappend(container[3], i)>  
    <cfelseif i mod 2 eq 0>  
        <cfset arrayappend(container[2], i)>  
    <cfelse>  
        <cfset arrayappend(container[1], i)>  
    </cfif>  
</cfloop>  

<style type="text/css"> 
    ul li { float: left; }  
    ul li ul li { clear: left; }  
</style>  

<cfoutput>  
<ul>  
    <cfloop from="1" to="3" index="a">  
    <li>  
        <ul>  
            <cfloop array="#container[a]#" index="i">  
            <li>#i#</li>  
            </cfloop>  
        </ul>  
    </li>  
    </cfloop>  
</ul>  
</cfoutput>

를 사용하여 모듈로 조작할 수 있는 신속하게 분할의 목록으로 여러 나열을 삽입하여 </ul><ul> 안하고 반복입니다.

<cfset numberOfColumns = 3 />
<cfset numberOfEntries = 34 />
<ul style="float:left;">
    <cfloop from="1" to="#numberOfEntries#" index="i">
        <li>#i#</li>
            <cfif NOT i MOD ceiling(numberOfEntries / numberOfColumns)>
                </ul>
                <ul style="float:left;">
            </cfif>
    </cfloop>
</ul>

사 ceiling() 대 round() 하는지 확인할 수는 없 값의 끝 부분에 목록을 마지막 열은 짧은.

목록을 출력합니다으로 여러 그룹에 태그할 수 있는 루프에서 이 패션이다.

<cfset list="1,2,3,4,5,6,7,8,9,10,11,12,13,14">
<cfset numberOfColumns = "3">

<cfoutput>
<cfloop from="1" to="#numberOfColumns#" index="col">
  <ul>
  <cfloop from="#col#" to="#listLen(list)#" index="i" step="#numberOfColumns#">
    <li>#listGetAt(list,i)#</li>
  </cfloop>
  </ul>
</cfloop>
</cfoutput>

여기에서 다른 솔루션을 허용하는 원주 목록에서 다음과 같은 스타일의:

1.      4.      7.       10.
2.      5.      8.       11.
3.      6.      9.       12.

(그러나 그것은 순수한 자바 스크립트,그리고 필요 jQuery 없이 대체)

다음을 포함 일부 코드 수정하는 배열 프로토 타입을 제공하는 새로운 기능'이라는 덩어리'는 주어진 배열의 덩어리로 지정된 크기입니다.다음은 기능'이라는 buildColumns'는 UL 선택 문자열을 사용되는 번호 지정하는 얼마나 많은 행의 열을 포함할 수 있습니다.(여기에는 작업 JSFiddle)

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;

        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }

    function buildColumns(list, row_limit) {
        var list_items = $(list).find('li').map(function(){return this;}).get(),
        row_limit = row_limit,
        columnized_list_items = list_items.chunk(row_limit);

        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));

                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
        });
    }

    buildColumns('ul#some_list', 5);
});

플렉스박스 감싸기 위하여 이용될 수 있는 항목에서 모두 행과 열의 방향입니다.

기본 아이디어를 설정하는 것입 flex-direction 컨테이너에서 하나 row 나 column.

NB:현재 브라우저 지원 아주 좋은 것입니다.

바이올린

(샘플 태그에서 가져온 이 오래된'목록 떨어져'문서) 

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}
<p>items in column direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>

에 있었기 때문에 동일한 문제와 아무것도 찾을 수 없습니다"깨끗하게"나는 게시된 내 솔루션입니다.이 예제에서 사용되는 while 반복할 수 있도록 사용 splice 대 slice.장점은 이제 splice()만 색인이 범위 조각()요구 인덱스이다.후자의 경향이 어렵게 되는 동안 시스템을 제공합니다.

불리는 내가 필요로하는 반전 스택을 추가하는 동안.

예제:

cols=4;liCount=35

루프와 조각=[0,9];[9,18];[18,27];[27,35]

반전하는 동안과 결합=[27,8];[18,9];[9,9];[0,9]

코드:

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}

시도할 수 있습니다 이로 변환하에 cols.

CSS:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

Html 일부:

<ul class="col">
    <li>Number 1</li>
    <li>Number 2</li>

    <li>Number 19</li>
    <li>Number 20</li>
</ul>
<ul class="col">
    <li>Number 21</li>
    <li>Number 22</li>

    <li>Number 39</li>
    <li>Number 40</li>
</ul>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top