CSS의 RESIVEBLE 공간에서 다양한 길이의 항목을 정렬하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/122920

문제

나는 다음과 같이 대략 아이템을 정렬하고 싶습니다.

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

기본적으로 구조와 같은 테이블에 배열 된 다양한 길이의 항목. 까다로운 부분은 이것들의 컨테이너가 크기가 다양 할 수 있으며 각 행에서 가능한 한 많은 것을 맞추고 싶습니다. 다시 말해, 라인에 얼마나 많은 항목이 적합한 지, 페이지가 있는지 미리 알 수 없습니다. 크기가 조정됩니다. 품목은 수용하기 위해 스스로 변동해야합니다. 예를 들어 처음에는 10 개의 항목이 각 라인에 맞을 수 있지만 크기 조정은 5로 줄일 수 있습니다.

열의 수를 모르기 때문에 HTML 테이블을 사용할 수 있다고 생각하지 않습니다 (줄에 얼마나 많은 사람들이 적합할지 모르기 때문에). 나는 CSS를 사용하여 떠 다니지 만 크기가 다양한 크기이므로 줄을 서지 않습니다.

지금까지 내가 생각할 수있는 유일한 것은 JavaScript를 사용하여 가장 큰 항목의 크기를 얻고 모든 항목의 크기를 해당 크기로 설정하고 남은 모든 것을 떠 다니는 것입니다.

더 나은 제안이 있습니까?

도움이 되었습니까?

해결책

이것은 플로팅 된 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);

너무 추악하지는 않지만 너무 예쁘지는 않지만 여전히 더 나은 제안에 열려 있습니다 ...

다른 팁

꾸준히 큰 아이템을 얻고 나머지는 작게 보이게되면 어떻게됩니까? 나는 두 가지 해결책을 고려할 것입니다.

  1. 플로트를 포함하여 이미 생각해 낸 것 : 왼쪽; 규칙과 jQuery이지만 최대 max_width 또는
  2. 거기에 어떤 값이 있을지에 따라 모든 항목에 대한 사전 설정 너비를 결정하십시오.

그런 다음 오버플로를 추가하십시오 : 숨겨진; 규칙을 지배하여 더 길어지는 항목은 테이블 모양을 만들지 않습니다. jQuery 함수를 변경하여 더 긴 항목을 다듬어 ELIPSIS (...)를 끝에 추가 할 수도 있습니다.

왼쪽으로 떠있는 블록 레벨 요소를 사용할 수 있지만 크기를 확인하고 가장 큰 크기를 찾고 그 너비로 설정하려면 자바 스크립트가 필요합니다.

편집 : 게시물의 후반부를 읽고이 수정 사항 만 제안한 것을 보았습니다. 이 게시물을 현재 아이디어에 대해 +1로 계산하십시오 :)

실제로 MaxWidth와 MaxHeight를 계산 한 다음 페이지로드 후 JavaScript의 크기 조정 기능을 수행해야합니다. 이전 프로젝트를 위해이 작업을 수행해야했으며 브라우저 중 하나 (FF?)는 DIV의 높이가 다르면 아래에있는 브라우저를 잡아/상쇄합니다.

글쎄, 당신은 단지 각 '항목'에 대한 부동 Div를 만들고 그 속성을 고리하고 라인 브레이크를 사용해 주시겠습니까? 그런 다음 속성을 통해 루핑을 마치면 DIV를 닫고 새 제품을 시작 하시겠습니까? 그렇게하면 그들은 기둥과 같고 서로 옆에 떠 다니는 것입니다. 창이 작 으면 다음 '선'으로 떨어지고 크기가 크기가 높으면 오른쪽으로 다시 떠 다니게됩니다 (실제로 왼쪽 :-)

다음과 같은 몇 가지 변하지 않은 목록을 떠올 수 있습니다.

<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에 얼마나 많은 목록을 밀어야하는지에 대한 몇 가지 목록 항목에 대한 계산을 수행해야하지만,이 방법은 목록을 보유하는 컨테이너를 다시 크기로 크기를 조정할 때 목록이 해당 컨테이너에 맞도록 플로트됩니다. .

각 열에 동일한 너비를 사용할 수 있습니다.

고정 된 열 너비가 있지만 목록은 자동으로 리플 로우됩니다. 약간의 추가 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;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top