다양한 높이의 목록 항목이 포함 된 여러 열 목록

Question

두 개의 열로 나누고 싶은 상자에 들어있는 요소 목록이 있습니다. 이런 식으로 뭔가 :

HTML

<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quos, unde, tenetur labore consequuntur repudiandae tempore totam soluta praesentium non cumque assumenda incidunt itaque pariatur animi eaque nam aliquid repellendus! Sed, eius laudantium deserunt pariatur rerum possimus enim iste corporis doloribus dolor ea ducimus facere similique qui nostrum excepturi quis ut aliquam animi nam eos doloremque et rem repellat libero neque at quas nesciunt explicabo fugiat.</li> 
    <li>Modi, eos, veritatis, laboriosam, cumque neque similique ea harum quas</li> 
    <li>totam cupiditate maiores impedit molestias non maxime nam quis animi laborum nesciunt ut provident sed dolorem dolorum veniam asperiores eligendi ad ratione sunt perferendis facilis</li> 
    <li>in earum itaque odio fugit mollitia exercitationem tempora necessitatibus voluptates accusamus dolore architecto eum natus. At, nulla, natus magnam quia provident consectetur nobis commodi quis repellendus dicta. Quo, placeat, excepturi iusto ipsam ullam cumque amet molestiae quaerat pariatur laboriosam voluptate</li> 
    <li>nostrum explicabo esse iure debitis mollitia minima doloribus architecto velit dolorum autem voluptatem aperiam quidem odit dolore itaque quasi.</li> 
    <li>Illum, doloribus, assumenda odit incidunt accusamus perferendis libero quas temporibus sit rerum tempora ipsum inventore aliquid accusantium sequi eveniet mollitia dolorem</li> 
    <li>quibusdam omnis architecto officiis ullam earum error. Quia, velit, odio, pariatur, officia maiores accusantium quibusdam aliquam nisi asperiores ipsam odit saepe molestiae cumque adipisci vel quis sapiente cum consectetur repellat deserunt. Dolore, neque harum recusandae praesentium quos officiis</li> 
    <li>dolores! Aliquid, aut nesciunt officiis. Beatae, maiores,</li> 
</ul> 

CSS

내 문제는 여기에서 볼 수 있듯이 열이 <li> 년대보다는 텍스트를 기반으로 절단되어 있다는 점이다

ul { 
list-style-type: none; 
-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px; 
} 

li{ 
padding: 30px; 
background: chartreuse; 
margin-bottom: 20px; 
} 

: http://jsfiddle.net/hZSCm/

를

CSS를 사용하여 올바르게 작동하도록 열을 가져 오는 방법이 있습니까? 아니면 단지 자바 스크립트 일 수 있습니까? 그렇다면 columnizer과 같은 것을 사용해야하거나 더 간단한 접근 방법이 있습니다.

Answer 1

이 시도 :

li{ 
    padding: 10px; 
    background: grey; 
    margin-bottom: 20px; 
    display: inline-block; /* Add inline-block */ 
} 

SEE DEMO