콘텐츠 아래에 요약 요약 방법

details 요소에 summary 요소가 있고 details 콘텐츠로 표시되는 summary 콘텐츠를 얻고 싶습니다.콘텐츠 아래에 요약 요약 방법

display 속성은 콘텐츠에만 작동하며 summary은 포함되지 않은 것으로 보입니다. summary의 위치를 바꿀 수있는 방법이 있습니까?

<html> 
    <head> 
     <style> 
      details 
      { 
       display: -webkit-box; 
       -webkit-box-orient: vertical; 
      } 

      details > summary 
      { 
       -webkit-box-ordinal-group: 2; 
      } 

      details > div 
      { 
       -webkit-box-ordinal-group: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <details open> 
      <summary>Get Me Down!</summary> 
      <div>Rise Up</div> 
     </details> 
    </body> 
</html>

출처

2012-11-26 abergmeier

그것은 더 의미 (내용 현명한)가 HTML의 실제 요소를 재정렬 할 수 있습니다? –

elments는 문제를 해결하는 데 많은 도움을 줍니까? – Jawad

@MadaraUchiha 끝까지? 요약은 위에 표시됩니다! – abergmeier

나는 꽤 해킹 된 솔루션이 있습니다. 또한 두 요소가 얼마나 큰지 알면 작동합니다. 그러나 그것은 내가 추측하는 시작이다.

details div { position: relative; bottom: 20px;} 
details summary { position: relative; top: 20px; }

http://jsfiddle.net/PUknK/10/

출처

2012-11-26 18:08:51 Calvin

괜찮 으면 JavaScript로 처리 할 수 있습니다. – Calvin

좋은 해킹. 순수한 CSS 솔루션이 선호 될 것입니다. – abergmeier

콘텐츠 아래에 요약 요약 방법

답변

관련 문제