elkaniho.com/ 에서처럼 CSS 레이아웃을 얻는 방법

이 웹 사이트 http://www.elkaniho.com/에는 CSS 레이아웃이 있습니다. CSS 레이아웃은 정확한 격자가 아니라 divs 스택을 원하는대로 표시합니다. 바닥과 측면에.elkaniho.com/ 에서처럼 CSS 레이아웃을 얻는 방법

브라우저의 크기를 조정하면 모두 다시 조정됩니다.

누구나 내가 어떻게 elkaniho.com에서 같은 레이아웃을 얻을 수 있는지 또는 레이아웃의 유형이 무엇인지 알 수 있습니까?

출처

2010-04-06 Enatom

그건 단지 6 열 레이아웃입니다. 쉽게 6 명 div를 함께 할 : 유체 레이아웃으로

<div id="container"> 
    <div class="column">one</div> 
    ... 
    <div class="column">six</div> 
</div>

#container { overflow: auto; } 
div.column { width: 16%; float: left; }

당신은 물론 폭을 너무 해결할 수 있습니다.

각 열에는 div (실제로는 블록 요소)를 수행하는 여러 div가 있습니다. 위에서 아래로 스택합니다.

출처

2010-04-06 01:37:14 cletus

실제로 열에 쌓인 것처럼 보이지 않습니다. 즉, 열 컨테이너가 없습니다. 각 div는 절대적으로 배치되고 left 및 top 속성이 주어지며 모두 단일 "contenedor"div의 직접적인 자식입니다. – Robusto

Masonry이라 불리는 깔끔한 jQuery 플러그인이 있으며 가변 폭의 div를 처리 할 수 있으며 최대한 긴밀하게 쌓아 둡니다. 귀하의 콘텐츠에 따라 다릅니다.

출처

2010-04-06 01:40:38

당신이 말하는 효과는 자바 스크립트를 사용하여 만들어집니다. 소스 코드를 보면, funciones.js라는 자바 스크립트 파일에 대한 링크가 있는데,이 효과를 담당하는 cajas 및 cajasInterior라는 함수가 포함되어 있습니다. 또한 그들은 jQuery를 사용하고있다.

기능 :

차체 폭, 박스 폭 마진
세트에 기초하여 최대 열 수 파악 박스 boxInterior 부류 모든 div의 절대 위치를 정할 그들의 너비
각 상자를 통과하여 왼쪽 및 위쪽 위치를 계산합니다.

본인은 사이트의 웹 마스터에게 연락하여이 스크립트를 사용하고 필요에 맞게 변경할 수있는 권한을 요청합니다.

출처

2010-04-06 01:51:00

elkaniho.com/ 에서처럼 CSS 레이아웃을 얻는 방법

답변

관련 문제