dl 항목 그룹화

Question

이 정의 목록이 있다고 가정 해보십시오 ("집합 수"는 중요하지 않으며 둘 이상이 있음).

<dl> 
    <dt>Authors 
    <dd>John 
    <dd>Luke 

    <dt>Editor 
    <dd>Frank 
</dl> 

이 정의를 수평으로 가져오고 싶습니다. 이 같은 얻을 것 있도록 :

Authors Editor 
John  Frank 
Luke 

을 그리고 브라우저 크기를 조정할 경우 너무 좁았다 그래서,이 같은 포장 것입니다 :

Authors 
John 
Luke 

Editor 
Frank 

는이 작업을 수행 할 수있는 방법이 있나요 좋은 방법?

dl의 유일한 법적 요소가 dt 및 dd 항목이므로 올바르게 div 요소 나 그와 비슷한 항목으로 감쌀 수 없습니다. 나는 그것들을 별개의 dl리스트들로 나눌 수 있었지만, 실제로는 하나의리스트 여야 했으므로 그것도 옳지 않을 것이다. 어떤 아이디어?

Answer 1

정렬되지 않은 목록을 사용하여이 문제를 해결했습니다. 여기를 보시기 바랍니다 : http://jsfiddle.net/radialglo/pXLB4/ 너비는 설정하지 않아도되지만 데모 용으로 충분한 너비를 설정하여 다음 줄. 바이올린에 html 뷰포트를 드래그하십시오.

<div> 
    <ul>Authors 
     <li>John</li> 
     <li>Luke</li> 
    </ul> 
    <ul> 
    <li>Editor</li> 
    <li>Frank</li> 
    </ul> 
</div>​ 

이 스타일 : 당신이 당신의 의미를 사용하는 방법에 대한 단호 경우

div ul{ 
    float: left; 
    list-style: none; 
    width: 100px; 
    margin-bottom: 1em; 
}​ 

, 나는 가능한 솔루션의 확실하지 않다. 각 정의 용어와 정의가 실제로 그룹화 된이 아니기 때문에 쉽게 스타일을 지정할 수 있기 때문입니다.

단점 :

Answer 2

의이 CSS3 - 아주 - 잘 지원되지 않는 다중 열 기능 놀자

• 고정 높이를 필요로
• (일부 미디어 쿼리를 작성하지 않는 한) 포장하지 않습니다

http://jsfiddle.net/rCQbP/5/

dl { 
    -webkit-column-width: 100px; 
     -moz-column-width: 100px; 
      column-width: 100px; 
    /* fixed height MUST be used */ 
    height: 200px; 
} 

dt ~ dt { 
    /* simulate column-break-before: always; */ 
    margin-top: 1000px; 
} 

Answer 3

한 쌍의 dt 및 dd 태그를 함께 묶을 유효한 태그가 없습니다. XHTML 2.0에서는 di 요소가 제안되었지만 XHTML 2.0은 결코 성공하지 못했습니다.

각 항목에 내부 태그 쌍이 있으므로 과 같지 않습니다. 각 li 태그는 각 목록 항목의 콘텐츠에 대한 내부 래퍼 역할을 할 수 있습니다 (이 경우 각 열에 대한 래퍼 역할을합니다) .

기본적으로 각 열에 dl 또는 ul을 사용하십시오. 시맨틱 마크 업은 좋지만 di이없는 경우 dl은이 유형의 레이아웃에 적합하지 않습니다.

편집 :

@biziclop가 언급 한 바와 같이, 한 번 CSS3 Multiple-column layout이 표준화되어

및 supported, (그 레이아웃이 많다는 이상으로 제한 옵션) 올바른 장소에서 열을 중단하는 것이 가능할 수있다. 결국, 코드는 다음과 같을 것이다 :

dl {column-width:100px; column-fill:auto;} 
dt {break-before:always;} 

Answer 4

그것은 약간의 절대 위치와 오래된 브라우저에서 인식되지 n 번째의 형 선택자 (와 가능 - 우웩 -하지만 어느 쪽도 미디어 쿼리입니다, 그래서 저하한다! OK) : 데모는 : http://jsfiddle.net/PrJWJ/6/

dt,dd{margin:0;} 

@media (min-width:20em) /* 10em per column */ 
{ 
    /* Enable positioning*/ 
    dl{position:relative;} 
    dt,dd{position:absolute;} 

    dt{top:0;} /* All terms at the top */ 
    dd{top:1.3em;} /* 1st dd under a term at 1.3em (factoring in line spacing) */ 
    dd+dd{top:2.6em;} /* 2nd dd under a term */ 

    /* 1st column */ 
    dt:nth-of-type(1), 
    dt:nth-of-type(1)~dd 
    {left:0;} 

    /* 2nd column */ 
    dt:nth-of-type(2), 
    dt:nth-of-type(2)~dd 
    {left:10em;} 
} 

@media (max-width:19.99em) 
{ 
    /* Space before a new term */ 
    dd+dt{margin-top:1em;} 
} 

그러나, 당신은 행과 열의 최대-가능한 수에 따라이를 확장해야합니다.