CSS의 크기를 조정할 수있는 길이에 다양한 길이의 항목을 정렬하는 방법은 무엇입니까?


1

나는이 같은 약 항목을 정렬하고 싶습니다 : 구조와 같은 테이블에 배치 된 다양한 길이의

기본적으로
item1  item2   i3   longitemname 
i4   longitemname2 anotheritem i5 

항목. 까다로운 부분은 크기가 다양하고 각 행에 할 수있는만큼 많이 넣을 수 있다는 것입니다. 즉, 줄에 얼마나 많은 항목이 들어 있는지 미리 알지 못합니다. 크기가 조정 된 항목은 수용하기 위해 스스로 재순환해야합니다. 예 : 처음에는 10 개 항목을 각 줄에 넣을 수 있지만 크기를 조정하면 5로 줄일 수 있습니다.

난 열 개수를 모르기 때문에 HTML 표를 사용할 수 없다고 생각합니다. 얼마나 많은 사람들이 한 줄에 들어갈 수 있는지). 나는 그들을 떠 다니기 위해 CSS를 사용할 수 있지만 크기가 다양하기 때문에 정렬되지 않을 것이다.

지금까지 제가 생각할 수있는 유일한 점은 자바 스크립트를 사용하여 가장 큰 항목의 크기를 가져 와서 모든 항목의 크기를 해당 크기로 설정하고 모든 항목을 떠 다니는 것입니다.

더 좋은 제안이 있으십니까?

  0

당신이 IE를 지원해야합니까? 24 sep. 082008-09-24 00:59:08

2

이것은 float div를 사용하여 최대 너비를 계산하고 모든 너비를 최대로 설정하여 수행 할 수 있습니다. 여기에 그것을 할 jQuery 코드입니다 :

HTML :

<div class="item">something</div> 
<div class="item">something else</div> 

CSS :

div.item { float: left; } 

JQuery와 :

var max_width=0; 
$('div.item').each(function() { if ($(this).width() > max_width) { max_width=$(this).width(); } }).width(max_width); 

너무 추한하지만하지 꽤 하나, 난 더 나은 제안을 위해 여전히 열려 있습니다 ...


0

블록 레벨 요소를 왼쪽으로 떠올리게 할 수 있지만 크기를 확인하고 가장 큰 것을 찾은 다음 그 너비로 모든 자바 스크립트를 설정해야합니다.

편집 : 게시물의 두 번째 절반을 읽고이 수정 사항 만 제안했음을 확인했습니다. 귀하의 현재 아이디어에 대한 +1 로이 게시물을 계산 :)


0

실제로 maxWidth 및 maxHeight를 계산하고 나서 페이지가로드 된 후 Javascript에서 크기 조정 기능을 수행해야합니다. 이전 프로젝트에서이 작업을 수행해야했고 div (div?)의 높이가 다른 경우 브라우저 중 하나 (FF?


0

글쎄, 각 '항목'에 대해 float div를 만들고 속성을 반복하고 linebreaks를 사용할 수 있습니까? 그런 다음 속성을 반복 할 때 div를 닫고 새 속성을 시작하십시오. 그런 식으로 그들은 기둥처럼되어 서로 옆에 뜬다. 창 크기가 작 으면 다음 '줄'로 내려 가고 크기를 조정하면 오른쪽으로 다시 떠 있습니다 (실제로는 왼쪽 :-)


0

정렬되지 않은 두 개의 목록을 플로팅 할 수 있습니다. 이 같은 :

<ul style="float: left;"> 
    <li>Short</li> 
    <li>Loooong</li> 
    <li>Even longer</li> 
</ul> 
<ul style="float: left;"> 
    <li>Loooong</li> 
    <li>Short</li> 
    <li>...</li> 
</ul> 
<ul style="float: left;"> 
    <li>Semi long</li> 
    <li>...</li> 
    <li>Short</li> 
</ul> 

그것은 DOM에 밀려되어야하는 목록에 얼마나 많은리스트 항목에 대한 몇 가지 계산하지만,이 방법을 수행 할 필요 - 당신은 목록을 보유하고있는 컨테이너 크기를 다시 할 때 - 목록이 해당 컨테이너에 맞도록 부동 상태가됩니다.

  0

하지만 각 항목에 얼마나 많은 항목을 넣을지는 알 수 없습니다. 23 sep. 082008-09-23 19:55:08

  0

그러면 테이블을 사용해야한다고 생각합니다. 그것은 결국 - 어떤 테이블을위한 것입니까? 하지만 정확히 그 일을하지 않는 것이 좋은 주장입니까? :) 23 sep. 082008-09-23 20:01:13

  0

어쨌든 : 실용적이어야합니다. 그것은 크로스 브라우저에서 작동한다면, 그것은 작동합니다. 무언가가 깨지거나 작성한 코드가 너무 느려지면 성능을 조정하고 수정하십시오. "허튼 소리를 시작했지만 발동"한다는 모토를 들었 는가? 나는 그것을 맹세한다. (예외는 있을지도 모르지만,이 경우는 그들 중 하나가 아니다.) 23 sep. 082008-09-23 20:12:56

  0

... 당신이 솔루션을 생각해 낸 것처럼 보이기는하지만 그렇게 예쁜 것은 아닙니다. 23 sep. 082008-09-23 20:13:45


1

크기가 큰 항목 하나를 가져 와서 나머지 항목을 작게 만들면 어떻게됩니까? 두 가지 해결책을 고려해 볼 수 있습니다 :

  1. 이미 float : left; 지배와 jQuery를하지만, 최대뿐만 아니라 MAX_WIDTH 또는
  2. 그냥 손 전에 모든 항목에 대한 미리 설정된 폭을 결정, 당신이 거기에있을 것으로 기대 값 내용에 따라

그런 오버 플로우를 추가 : 숨겨진; 규칙이 길어서 표 본을 보지 못한다. jQuery 함수를 변경하여 더 긴 항목을 잘라내어 끝에 elipsis (...)를 추가 할 수도 있습니다.


0

각 열마다 다음과 같은 너비를 사용할 수 있습니다.

너는 고정 열 너비를 가지지 만 목록은 자동으로 리플 로우됩니다. 약간의 추가 HTML을 추가했지만 지금은 FF en IE에서 작동합니다.

HTML :

<ul class="ColumnBasedList"> 
    <li><span>Item1 2</span></li> 
    <li><span>Item2 3</span></li> 
    <li><span>Item3 5</span></li> 
    <li><span>Item4 6</span></li> 
    <li><span>Item5 7</span></li> 
    <li><span>Item6 8</span></li> 
</ul> 

CSS :

.ColumnBasedList 
{ 
    width: 80%; 
    margin: 0; 
    padding: 0; 
} 

.ColumnBasedList li 
{ 
    list-style-type: none; 
    display:inline; 
} 

.ColumnBasedList li span 
{ 
    display: -moz-inline-block; 
    display: inline-block; 
    width: 20em; 
    margin: 0.3em; 
} 
  0

이것은 나를 위해 작동하지 않습니다 - 그것은 리플 로우 (FF 2.x)없이 단순한리스트로 나타납니다. 23 sep. 082008-09-23 20:19:46

  0

디스플레이 : 인라인 블록; 표시되어야합니다 : 인라인; 23 sep. 082008-09-23 21:50:15

  0

아니요 ... ff3에서만 지원됩니다. 게다가 고정 된 너비로 고정되어 작동하지 않습니다. 이것은 테이블 일뿐입니다. 24 sep. 082008-09-24 00:58:11

  0

맞습니다. 크로스 브라우저가되도록 내 대답을 변경했습니다. 24 sep. 082008-09-24 08:05:29