2013-03-11 3 views
1

열 기반 블로그 레이아웃을 만들려고합니다. 페이지의 맨 아래에 닿으면 텍스트가 새로운 열로 바뀌길 원합니다. 그것은 매우 단순한 형태로, 열이 height == the_height_of_the_wrapper 일 때 column-count++ 일 때와 같습니다.여러 동적 열

이와 같은 문제는 텍스트가 균등하게 분배된다는 것입니다. 또한, 그것은 css 칼럼에 의존 할 것이고 나는 좀 더 브라우저 친화적 인 것을 원한다. 이 기능을위한 기존 플러그인이 있습니까? 아니면 어디에서든지 아이디어를 얻을 수 있습니까?

누군가가 텍스트 중창과 같은 "메트로"앱 (예 : 뉴스와 같은)에 익숙하다면 그 종류의 레이아웃은 모방하려는 것입니다.

+1

전통적인'column-count'는 당신에게 충분하지 않습니까? 예 : http://www.w3schools.com/css3/tryit.asp?filename=trycss3_column-count – Kasyx

+0

아니요. 1 열로 시작했다고 가정 해 봅시다. 화면 하단에 도달하면 개수가 2로 증가했습니다. 그러면 내용이 균등하게 분산되어 2 개의 반 높이 열이 만들어져 부 자연스럽게 보일 수 있습니다. 첫 번째 열은 100 % 높이가되어야하고 두 번째 열은 첫 번째 열이 처음부터의 오버플로만 포함해야합니다. – Calvin

+1

하지만보기를 보면 열 수를 줄이거 나 늘릴 수 있습니다. 텍스트 높이는 열 개수에 의존하지 않고'column-gap'에 의존합니다. 즉, 텍스트의 높이가 100 픽셀 인 경우 열과 간격을 추가하여 텍스트의 높이를 높일 수 있습니다. – Kasyx

답변

0

의견에서 알 수 있듯이 column-count을 사용할 수 없습니다. 하지만 해결 방법이 있습니다.이 부분을 확인하십시오. Continuing overflowed text in a different div?

또는. 래퍼에 고정 높이 (백분율조차도 적용 할 수 있음)를 적용하여 열이 적절하게 채울 수 있습니다. (예 : w3schools.com/css3/tryit.asp?filename=trycss3_column-count). 내용이 지시 할 때 여분의 열을 생성하는 것으로 보이는 고정 된 열 개수를 지정하지 않아도되는 것처럼 보입니다.