2 열 매거진을 본뜬 페이지

이것은 단순한 2 열 페이지 레이아웃과 관련이 없습니다. 오히려 두 번째 열의 잡지 페이지처럼 동작하는 경계가있는 CSS 상자를 만드는 방법입니다. 내용이 첫 번째 열을 채우는 것으로 시작한 다음 첫 번째 열의 공간이 부족한 경우 두 번째 열로 이동합니다. (텍스트가 추가되었거나 글꼴 크기가 증가했기 때문에).2 열 매거진을 본뜬 페이지

MS Word에서 2 열 레이아웃이 어떻게 작동하는지 몇 장의 사진을 통해 문제를 명확히 알 수 있습니다. 명심 중요한 점은 우리가 첫 번째 열에 속하는 사전에있는 내용 모르겠입니다 두 번째에있는 (즉, 쉬운 문제입니다) :

enter image description here

콘텐츠 1 열에서 시작 글꼴 크기가 증가 열 2에

내용 유출 :

enter image description here

그것은 CSS에서이 작업을 수행 할 수 있습니까?

출처

2011-08-16 Jonah

http://caniuse.com/multicolumn없이,이 확실히 자바 스크립트가 필요합니다. – jackJoe

@jackJoe : 유감스럽게도 현재 버전의 IE에서 작동해야하는 경우 JavaScript가 필요합니다. ( – thirtydot

CSS3 대답이 있습니다 http://www.w3.org/TR/css3-multicol/

참조 :http://jsfiddle.net/thirtydot/bjfVe/

#container { 
    -moz-column-count: 2; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid #666; 

    -webkit-column-count: 2; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid #666; 

    column-count: 2; 
    column-gap: 1em; 
    column-rule: 1px solid #666; 
}

브라우저 지원 .. 매우 예측 :

출처

2011-08-16 18:47:37 thirtydot

좋은 점, 잘 모르겠습니다 :) 대화식이 아니지만 (글꼴 크기 변경에 따라 다름) 그것은 CSS를 통해 할 수 있습니다. – jackJoe

2 열 매거진을 본뜬 페이지

답변

관련 문제