2011-07-07 8 views
1

div가 있고 div 안에 목록이 있습니다.div 안에 래핑 목록

 
Item 1 Item 2 Item 3 Item 4 
Item 5 Item 6 Item 7 Item 8 

, 인라인 블록이 같은 그것을 만들 수 있습니다하지만 난에 대한 열의 싶습니다

 
Item 1 Item 5 Item 9 

Item 2 Item 6 Item 10 

Item 3 Item 7 Item 11 

Item 4 Item 8 Item 12 

내가 디스플레이와 이해 : 내가 사업부 내부의 목록은 다음과 같이 표시 할 div가 끝나면 세로로 이동 한 다음 위에서 다음 열의 맨 위에서 다시 시작하십시오. div의 높이가 고정되어 있습니다. 디스플레이가 없으면 텍스트가 div 밖으로 나옵니다.

감사합니다.

+0

이렇게하기 위해 노력한 HTML과 CSS를 제공 할 수 있습니까? 왜 3 개의 UL을 사용하고 LI 스타일을 사용하지 않습니까? – Dan

+0

네 말이 맞아, 네. 나는 단지 그렇게 할 것이라고 생각한다. PHP를 사용하기 때문에 코드를 게시하기가 다소 어렵습니다. 하지만 그래, 고마워. – urgenthelp

답변

5

@urgenthhelp; css3 columns count 속성을 사용할 수 있습니다.

CSS는

ul { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
} 
li{margin-bottom:10px} 

확인이 http://jsfiddle.net/sandeep/Qnsqm/는 당신의 도움의 될 수있다.

+0

굉장해. 감사! 이 문제는 내 문제를 해결합니다 :) – urgenthelp

+0

좋은 해결책은 IE 브라우저가 아닙니다. –

+0

네, 그게 내가 css3 columns count 속성을 쓴 이유입니다. – sandeep

관련 문제