블록에 두 개의 열 표시

Question

문제에 대한 도움이 필요합니다.

특정 높이의 블록이 목록에 있습니다. 높이가 목록 높이보다 높기 때문에 displayed in 2 columns입니다.

처음에는 목록 항목의 첫 번째 열을 채운 다음 두 번째 항목을 채우지 않았습니다. it looks like this

CSS

.wrap{ 

} 
.wrap ol{ 
    height: 290px; 
    width: 500px; 
    display: block; 
    outline: 1px solid red; 
    overflow: hidden; 
} 

    .wrap ol li{ 
     width: 50%; 
     float: left; 
    } 

Answer 1

쉬운 방법은 CSS 다중 열을 사용하는 것입니다.

.wrap{ 
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
} 

는 http://jsfiddle.net/aC4Nc/

이 polyfill

를 사용, 기존 브라우저와 compatiblity을 높이기 위해 참조