청사진 발행

Question

다음 레이아웃이 있습니다. 첫 번째 행은 잘 인쇄되지만 두 번째 행의 시작 부분은 두 번째 행의 두 번째 div가 있어야하는 곳에서 시작됩니다. 첫 번째 행의 마지막 div의 범위를 3으로 설정하면 두 번째 항목이 정상적으로 인쇄됩니다.

부모 div는 670 픽셀이고 각 자식은 160입니다 (오른쪽 가장자리 여백은 10 픽셀 포함). 4 개 모두는 한 행에 들어 있어야하지만, 여기에 무엇이 잘못 되었습니까?

내가 bassically 당신이 컬럼의 기본 번호를 변경하는 압축기를 사용하지 않았다면 네 아이의 행 (17 개) 스팬의 부모 DIV 4.

<div id="parent" class="span-17 last> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
</div> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
    <div id="child" class="span-4 last"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
<!--row 2 starts --> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
    <div id="child" class="span-4"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
    <div id="child" class="span-4 last"> 
    <span>content</content> 
    <span> image </content> 
    </div> 
</div> 

Answer 1

의 범위와 각 div를 원하는, 청사진 (24)를 사용 기본적으로 열이 있습니다. 또한 어딘가에 컨테이너를 정의해야합니다.

<div class="container"> 
    <div class="span-24 last"> 
     Header Row 
    </div> 
    <div class="span-4"> 
     Blank buffer div (to keep 24 cols) 
    </div> 
    <div class="span-4"> 
     Content 1 
    </div> 
    <div class="span-4"> 
     Content 2 
    </div> 
    <div class="span-4"> 
     Content 3 
    </div> 
    <div class="span-4"> 
     Content 4 
    </div> 
    <div class="span-4 last"> 
     Another blank buffer 
    </div> 
</div> 

기본적으로 모든 열이 항상 24 개가되도록해야합니다. last 선언은 누락 된 열을 채우지 않습니다. 당신은 span-17 div와 4 개의 span-4 아이들을 언급하고 있는데, 그것들은 합쳐지지 않습니다. 정의되지 않은 결과를 생성 할 수있는 열이 없거나 최소한 열악한 것으로 보입니다. 당신이 24로 4 개 블록 균등 분할 <div>의, 그냥 각 span-6를 사용하는 버퍼를하지 않으려면 내가 그것을 주석 경우

는

는