2011-12-24 2 views
0

페이지에 두 개의 div 태그 (예 : 왼쪽에 하나, 오른쪽에 다른 하나)가 책과 같이 사용됩니다. 이제 div 태그의 오른쪽면을 초과하면 HTML 페이지가 왼쪽에로드됩니다. 저에게이 아이디어를 구현해주십시오. 당신은 텍스트가 두 번째 열의 시작 첫 번째 열의 바닥에서 계속 두 개의 열이 프리젠 테이션을 원하는처럼 어떻게 다른 섹션에서 HTML 페이지를 깰 수 있습니까?

이 소리

+2

당신이 이미 가지고있는 HTML/CSS/JavaScript를 http://jsfiddle.net/에서 볼 수 있고 당신의 문제가 무엇인지에 대한 명확한 생각을 보여줄 수 있습니까? – ManseUK

+2

아이디어 : 왼쪽면의 높이, 내용 높이를 계산하고, 내용 요소를 반복하고'content.height <= leftSide.height'와 같은 수만큼 가져 와서 왼쪽에 추가하십시오. 나머지는 오른쪽에 추가하십시오. –

답변

1

을 찾고 주셔서 감사합니다. 넷스케이프는 이러한 용도로 독점적 인 태그를 사용했지만,별로 사용되지 않았으며 넷스케이프로 사망했습니다. 이 문제는 스타일링 및 모듈 CSS3 Multicolumn Layout의 일부로 간주됩니다. 그것의 주된 문제는 모든 버전의 IE에서 지원이 부족하다는 것입니다. 소개 기사는 QuirksMode.org에서 Columns을 확인하십시오.

3

예, CSS3, css 클래스에서 지정된 높이로 다중 열 레이아웃을 사용할 수 있습니다.

  <html> 
      <head>Test </head> 

      <style> 
      .tt{ 
       -moz-column-count: 2; 
       -moz-column-gap: 1em; 
       -moz-column-rule: 1px solid black; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 1em; 
       -webkit-column-rule: 1px solid black; 
       height:200px; 
      } 

      </style> 
      <body> 
      <div class="tt"> 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived.  
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived.  
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived.  
      </div> 
      </body> 
      </html> 

저는 Microsoft 팬이 아닙니다. IE에 대한 약속이 없습니다.

+0

Opera는 webkit 및 moz-prefixes 만 사용하지 않습니다. Opera는 이것을 지원합니다 ([접두어 없음] (http://www.opera.com/docs/specs/presto29/css/multicolumnlayout/)). – Bergi

관련 문제