css : 브라우저 간, 리플 로우, 위에서 아래로, 다중 열 목록

http://cssfingerprint.com/about#stats을 참조하십시오.css : 브라우저 간, 리플 로우, 위에서 아래로, 다중 열 목록

때문에 바깥 쪽 요소에 맞게으로

는 많은 열을 만드는
- 는
- 리플 로우 창 크기에는 JS를 사용하지 않습니다
  나는 다중 열 목록을 원하는 목록을 수동 열 그룹으로 일괄 처리해야 함
미지의 폭의 임의의 수의 LL 브라우저
작품 (그러나 단일 라인 높이) 요소
- 각 열에는 (동적) 콘텐츠의 너비에 맞게 만들어 스크롤바를 생성하지 않는
0,123,516 : 또는 다른 오버 플로우는

내 코드는 현재 가능한

이 위에서 아래로 정렬됩니다 문제

ul.multi, ol.multi { 
width: 100%; 
margin: 0; 
padding: 0; 
list-style: none; 
-moz-column-width: 12em; 
-webkit-column-width: 12em; 
column-width: 12em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 
column-gap: 1em; 
} 

ul.multi li, ol.multi li { 
<!--[if IE]> 
    float: left; 
<![endif]--> 
    width: 20em; 
    margin: 0; 
    padding: 0; 
}

이 좋아을 작동하지만, 그것은 몇 가지 문제가 있습니다

I 콘텐츠 폭을 추측 할
은 오른쪽에서 왼쪽이 정상으로 허용하지만 (IE에 분해 모드)
은 비 IE에서 전혀 작동하지 않습니다, 비 모즈/웹킷/CSS3 브라우저

은 어떻게 개선 할 수 있습니까?

출처

2010-03-07 Sai

... 행운을 빈다. –

이 코드가 서버에서 생성 되었습니까? 아니면 정적 HTML 페이지입니까? 동적 페이지 인 경우 서버에서 HTML 서식을 지정할 수 있습니다. – acme

구조용 웹 사이트 디자인에 CSS3를 사용하지 마십시오. 내 최고의 추측은 본질적으로 그냥 CSS3 물건을 제거 아래처럼 뭔가를 시도입니다. 큰 문제는 내가 너를 올바르게 이해하고 있다면 너의 너비를 알지 못한다는 것이다. 너비가 고정 된 너비로이 모든 것이 네가 필요로하는 것이어야한다. 그러나 네가 묘사 한 것을 위해 네가 좋은 옛 친구 Javascript에서 도움을 필요로하는 것처럼 보일거야! :)

<style> 
body, html 
{ 
    margin: 0; 
    padding: 0; 
} 
ul.multi 
{ 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.multi li 
{ 
    float: left; 
    width:10em; 
    line-height: 1; 
    margin: 0; 
    padding: 0; 
} 
</style> 

<ul class="multi"> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
</ul>

출처

2010-03-08 00:28:56 Tom

이것은 이전과 거의 동일합니다. 그것은 위에서 아래로, 그러나 실패합니다. :-P – Sai

맨 아래로 ... 그래, 당신은 확실히 자바 스크립트를 누른 다음 데이터를 정렬해야합니다. 확실히 할 수 있지만 자바 스크립트가있는 것은 아닙니다. – Tom