Div 오버플로에서 Div가 나란히 숨겨져 있습니까?

Question

가로로 스크롤되는 상위 div에 3 행의 div가 래핑되었습니다.

가로보기에서 2 줄을 표시하는 데 도움이 필요합니다.

나는 마지막 행을 대상으로 두 번째 행을 인라인으로 만들려고했습니다. 나는 인라인 - 플렉스/블록을 시도했으나 플로트를 떠났다. 여기

내 코드입니다 :

https://jsfiddle.net/agipeeli/g1end453/1/

코드 :

#wrapper { 
 
    margin: 20px; 
 
    padding: 20px; 
 
    width: 450px; 
 
    overflow-x: auto; 
 
    background: #eee; 
 
    border: 1px solid #333; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper .row-container { 
 
    padding: 20px 0 0; 
 
    display: flex; 
 
} 
 

 
.post { 
 
    background: #fff; 
 
    border: 1px solid #e4e4e4; 
 
    margin-left: 20px; 
 
    padding: 40px; 
 
    display: inline-block; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 
    #wrapper { 
 
    background-color: lightblue; 
 
    /* flex-direction: row; - combines all 3 containers into 1 row */ 
 
    } 
 
    .row-container:last-of-type { 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 1</div> 
 
    <div class='post'>Post 2</div> 
 
    <div class='post'>Post 3</div> 
 
    <div class='post'>Post 4</div> 
 
    <div class='post'>Post 5</div> 
 
    <div class='post'>Post 6</div> 
 
    </div> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 7</div> 
 
    <div class='post'>Post 8</div> 
 
    <div class='post'>Post 9</div> 
 
    <div class='post'>Post 10</div> 
 
    <div class='post'>Post 11</div> 
 
    <div class='post'>Post 12</div> 
 
    </div> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 13</div> 
 
    <div class='post'>Post 14</div> 
 
    <div class='post'>Post 15</div> 
 
    <div class='post'>Post 16</div> 
 
    <div class='post'>Post 17</div> 
 
    <div class='post'>Post 18</div> 
 
    </div> 
 
</div>

Answer 1

당신이 이런 식으로 뭔가를 시도 할 수 있습니까? 당신은 미세 조정을해야 할 수도 있습니다, 미디어 쿼리 부분을 건너 뜁니다.

CSS :

#main { 
    width: 100px; 
    height: 200px; 
    border: 1px solid #c3c3c3; 
    display: -webkit-flex; /* Safari */ 
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */ 
    display: flex; 
    flex-flow: row-reverse wrap; 
} 

#main div { 
    width: 50px; 
    height: 50px; 
border: 1px solid #f00; 
} 

HTML :

이

<div id="main"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
    <div>D</div> 
    <div>E</div> 
    <div>F</div> 
</div>