크기가 다른 타일로 반응하는 레이아웃. 적절한 줄 바꿈 설정

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이 작동하는 것으로 이해하는 방법입니다.

example of unwanted layout

만큼 모든 타일이 문제는 쉽게 모든 3 또는 (화면 크기)에 따라 매 2 번째 타일의 :nth-child() 선택기와 clear: left; 속성을 설정함으로써 해결 될 수있는 동일한 폭의 같다.

그러나이 경우 2 열 너비 타일의 경우 간단한 계산 규칙이 없습니다. 그러나 형식 지정 규칙은 간단합니다. 타일이 마지막 열을 채울 때마다 다음 타일은 clear:left 속성을 받아야합니다. 그러나 나는 CSS에서 이것을 함축하는 방법을 모릅니다. 자바 스크립트도 괜찮을 것이다.

도움을 주시면 감사하겠습니다.

출처

2017-12-24 Patrick Wunsch

CSS만으로는 안됩니다. 모든 타일의 너비가 동일하면 CSS 열을 사용할 수 있습니다. 그러나이 경우 바이올린을 작게 만들면이 문제는 다른 장소에서 나타납니다. 그래서 당신은 다른 레이아웃 엔진을 찾고 있습니다. Google에서 '석조 건축물'을 찾습니다. –

힌트를 보내 주셔서 감사합니다. –

벽돌처럼 보이지 않습니다. 내가 찾고있는 것이 아닙니다. 벽돌은 컴팩트하게 행을 포기하는 타일을 포장합니다. 내가 찾고있는 레이아웃은 행 기반이며 순서대로 타일을 주문합니다. 사실 벽돌보다 훨씬 간단합니다. 어떤 아이디어? –

가능한 해결책 중 하나는 w3.css에서 부트 스트랩 4로 전환하는 것입니다. 부트 스트랩 4는 플롯 대신 플렉스 박스를 사용합니다. 플렉스 박스는 위에서 설명한 레이아웃에서 예상대로 작동합니다. 코드는 간단합니다 (https://jsfiddle.net/pwunsch/u35sd03u/).

<body> 
    <div class="container" id="content"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">1 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">2 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">3 - normal article</div></div> 
     <div class="col-sm-12 col-md-12 col-lg-8"><div class="special">4 - special article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">5 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">6 - short article</div></div>  
     <div class="col-sm-6 col-md-12 col-lg-8"><div class="special">7 - special article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">8 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">9 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">10 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">11 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">12 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">13 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">14 - normal article</div></div> 
    </div> 
</div>

위에 설명 된 시나리오에 대한

작품 잘. 나는 w3.css를 수정/수정하는 확실한 방법을 찾지 못했습니다.

출처

2018-01-01 17:01:24

크기가 다른 타일로 반응하는 레이아웃. 적절한 줄 바꿈 설정

답변

관련 문제