2017-12-09 4 views
1

w3.css로 반응 형 웹 레이아웃을 만들려고합니다. 소형 화면/모바일 장치에서는 대형 화면에서 3 열, 중형에서 2 열, 한 열을 사용하여 행을 처리합니다. 각 행은 두 개의 고정 된 높이 중 하나를 가질 수있는 타일로 구성됩니다.w3-css : 다른 높이 블록을 사용하여 반응이 3 열 레이아웃

<div class="w3-content w3-white" style="max-width:600px"> 
    <div class="w3-row-padding "> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>      
    </div> 
</div> 

나는 3 열 레이아웃의 큰 화면에서 다음과 같은 결과를 기대 :

expected result

위의 코드는 하나, 둘, 열 레이아웃과 괜찮지 만, 다음과 같은 원치 않는 생산 세 개의 열 출력 :

unwanted output

내가 세 타일 후 W3 행 패딩을 종료하는 경우, 세 COL UMN이 위의 코드는 중간 화면에 생성하는 것입니다 레이아웃은 괜찮습니다,하지만 난 두 개의 열

<div class="w3-content w3-white" style="max-width:600px"> 
    <div class="w3-row-padding"> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div> 
    </div> 
    <div class="w3-row-padding"> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div> 
    </div> 
    <div class="w3-row-padding"> 
     <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>      
    </div> 
</div> 

와 매체 스크린 혼란을 얻을 : 어떤 도움에 감사드립니다

medium screens

답변

0

이것이 당신에게 트릭이 되겠습니까? https://codepen.io/panchroma/pen/BmXOOe

HTML은 내가 '부모'클래스를 w3-row-padding에 추가 한 것을 제외하고 게시 한 것과 같습니다. 이 클래스를 사용하여 CSS로 하위 열을 타겟팅합니다.

HTML

<div class="w3-content w3-white" style="max-width:600px"> 
    <div class="w3-row-padding parent"> <!-- note new class in this line --> 
    .... 
    </div> 
    </div> 

CSS

@media (min-width: 993px){ 
    .parent .w3-col:nth-child(3n + 1){ 
    clear:left; 
    } 
} 

뷰포트 993px 또는 넓은합니다 (w3.css 그리드에서 변화하는 너비 때 CSS의 로직이다 폭이 2 열에서 너비가 3 열인 경우) nth 자식 선택기를 사용하여 행에서 1, 4, 7, 10, ... (3n +1) 열을 선택하고 clear : left 규칙을 적용합니다. 이렇게하면이 열이 다음 행의 시작으로 이동합니다. n 번째 자식 선택의 작동 방식에 대한

추가 정보 :이 도움이
https://css-tricks.com/how-nth-child-works/

희망!

+0

덕분에 David는 완벽하게 작동합니다. 차가운 물건, nth 자식 선택기, 그 하나에 대해 알지 못했습니다. –

+0

우수, 고맙습니다. @PatrickWunsch –

+0

알려 주셔서 감사합니다. 다음 코드를 CSS에 추가하면 두 개의 열 레이아웃이있는 디스플레이에 올바른 정리가 설정됩니다. @media (최대 너비 : 992 픽셀) { .parent .w3-col : nth-child (2n + 1) { clear : 왼쪽; } }' –