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 열 레이아웃의 큰 화면에서 다음과 같은 결과를 기대 :
위의 코드는 하나, 둘, 열 레이아웃과 괜찮지 만, 다음과 같은 원치 않는 생산 세 개의 열 출력 :
내가 세 타일 후 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>
와 매체 스크린 혼란을 얻을 : 어떤 도움에 감사드립니다
덕분에 David는 완벽하게 작동합니다. 차가운 물건, nth 자식 선택기, 그 하나에 대해 알지 못했습니다. –
우수, 고맙습니다. @PatrickWunsch –
알려 주셔서 감사합니다. 다음 코드를 CSS에 추가하면 두 개의 열 레이아웃이있는 디스플레이에 올바른 정리가 설정됩니다. @media (최대 너비 : 992 픽셀) { .parent .w3-col : nth-child (2n + 1) { clear : 왼쪽; } }' –