w3.css를 사용하여 반응 형 레이아웃을 작성하려고합니다. 그것은 높이와 너비가 다른 세 가지 유형의 타일로 이루어져 있습니다. 레이아웃은 작은 화면에는 단일 열, 큰 화면에는 중간 열 및 두 열 (w3.css에 의해 결정됨)입니다. 직선 앞으로 코드 (https://jsfiddle.net/pwunsch/p2nL28f3/2/)와 크기가 다른 타일로 반응하는 레이아웃. 적절한 줄 바꿈 설정
...<body class="w3-gray" id="home">
<div class="w3-content w3-white" style="max-width:400px">
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12"><div class="normal">1 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">2 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">3 - normal article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">4 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">5 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">6 - short article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">7 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">8 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">9 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">10 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">11 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">12 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">13 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">14 - normal article</div></div>
</div>
</div>
</body>
... 난 문제로 실행하는 행이 행의 마지막보다 높은 패를 포함 때마다 뒤 따르는 타일은 새 타일보다 같은 행에 위치합니다 (다음 예에서 타일 13/14 참조). 이것은 실제로 float: left
이 작동하는 것으로 이해하는 방법입니다.
만큼 모든 타일이 문제는 쉽게 모든 3 또는 (화면 크기)에 따라 매 2 번째 타일의 :nth-child()
선택기와 clear: left;
속성을 설정함으로써 해결 될 수있는 동일한 폭의 같다.
그러나이 경우 2 열 너비 타일의 경우 간단한 계산 규칙이 없습니다. 그러나 형식 지정 규칙은 간단합니다. 타일이 마지막 열을 채울 때마다 다음 타일은 clear:left
속성을 받아야합니다. 그러나 나는 CSS에서 이것을 함축하는 방법을 모릅니다. 자바 스크립트도 괜찮을 것이다.
도움을 주시면 감사하겠습니다.
CSS만으로는 안됩니다. 모든 타일의 너비가 동일하면 CSS 열을 사용할 수 있습니다. 그러나이 경우 바이올린을 작게 만들면이 문제는 다른 장소에서 나타납니다. 그래서 당신은 다른 레이아웃 엔진을 찾고 있습니다. Google에서 '석조 건축물'을 찾습니다. –
힌트를 보내 주셔서 감사합니다. –
벽돌처럼 보이지 않습니다. 내가 찾고있는 것이 아닙니다. 벽돌은 컴팩트하게 행을 포기하는 타일을 포장합니다. 내가 찾고있는 레이아웃은 행 기반이며 순서대로 타일을 주문합니다. 사실 벽돌보다 훨씬 간단합니다. 어떤 아이디어? –