grid 레이아웃으로 겹치는 div 레이아웃 960

웹 레이아웃 용으로 960 CSS 그리드 파일을 사용하고있어 좋지만이 레이아웃에서는 div를 겹쳐 써야합니다.grid 레이아웃으로 겹치는 div 레이아웃 960

그리고 2 열이 나란히있는 경우 오른쪽에 class = "pull_1"을 설정하여 왼쪽 하나를 겹칠 수 있습니다.

<div class="grid_2"> 
    <p> 
    <img src="../star.jpg" width="236" height="329" style="float:left;"> 
    </p> 
    </div> 

<div class="grid_2 pull_1"> 
    <p> 
    <img src="../star.jpg" width="236" height="329" style="float:left;"> 
    </p> 
    </div>

하지만 위쪽으로 겹쳐하려면? 예, 마진을 설정할 수 있습니다 : 상단 : -50px; 왼쪽과 위로 모두 이 겹쳐집니다.

<div class="grid_2"> 
    <p> 
    <img src="../star.jpg" width="236" height="329" style="float:left;"> 
    </p> 
    </div> 

<div class="grid_2 pull_1" style="margin-top:-50px;"> 
    <p> 
    <img src="../star.jpg" width="236" height="329" style="float:left;"> 
    </p> 
    </div>

이렇게 멋진 레이아웃으로 만들고 싶습니다. 어떻게 할 것인지, 아니면 누구에게 더 좋은 방법이 있는지 궁금합니다. enter image description here 감사!

출처

2013-11-14 Claes Gustavsson

모든 div에 CSS 규칙이 position:absolute 인 경우 게시 한 사진의 것과 같은 레이아웃을 만들려면 top 및 left 위치 오프셋을 설정할 수 있습니다. 당신이 원하는 경우 div의가 뒤에서 앞으로 정렬됩니다 있는지 확인 얻을 축성 올바른 ..

여기 absolute 위치와 함께 무엇을 할 수 있는지의 아주 간단한 예제 : 많은 카일을 http://jsfiddle.net/ZqRgj/1/

출처

2013-11-14 14:58:00

감사, 예 나는 그것을 tryd하고 좋은 일을하고, 좀 더 생각한 후에 나는 그것을 동적으로 만들고 싶었고, db에서 이미지를 얻었고, 어쩌면 어떤 생각으로 그 위치를 임의로 무작위로 만들었 을까? 모든 1,15,30 이미지에 CSS 클래스를 설정하고 2,14,29 개마다 다른 클래스를 설정합니다. –

각 이미지를 다른 위치에 넣으려면 CSS 규칙을 클래스에 둘 필요가 없습니다. 당신은 대신 인라인 CSS를 사용할 수 있습니다 : '

' 페이지에 div가 추가되면 jquery를 사용하여 상단 및 좌측 값을 무작위로 생성 할 수 있습니다. –

grid 레이아웃으로 겹치는 div 레이아웃 960

답변

관련 문제