수평으로 정렬 된 div 4 개를 작은 화면 크기에서 두 개로 나눕니다.

Question

이전에 답변을 드렸던 경우 사과드립니다.

저는 가로로 정렬 된 div가 4 개 있습니다. 각각은 img와 텍스트가 들어 있습니다. 나는 화면 크기를 줄일 때

box box box box 

, 내가 중간에서 내려 분할이 원하는 나에게주는 :

box box 
box box 

을 대신 나는 현재 받고 있어요 무엇 :

box box box 
    box 

현재 화면 크기를 줄이면 2x2 크기로 쌓아서 아주 작은 화면 (이 경우 여전히 필요)에서 세로 레이아웃으로 분할합니다. 여기

JS 바이올린 : https://jsfiddle.net/zyrkstnk/

어떤 아이디어? 나는 & nbsp로 어지럽 혔지만 작동시키지 못했습니다. 감사!

Answer 1

#homethumbs { 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
.homethumb { 
 
\t width: 300px; 
 
} 
 
.homethumb, .wrap { 
 
\t display: inline-block; 
 
}

<div id="homethumbs"> 
 
    <div class="wrap"> 
 
     <div class="homethumb"> 
 
      <img src="http://placehold.it/250x250"> 
 
      <h2>Start here with the basics</h2> 
 
     </div> 
 
     <div class="homethumb"> 
 
      <img src="http://placehold.it/250x250"> 
 
      <h2>Start here with the basics</h2> 
 
     </div> 
 
    </div> 
 
    <div class="wrap"> 
 
     <div class="homethumb"> 
 
      <img src="http://placehold.it/250x250"> 
 
      <h2>Start here with the basics</h2> 
 
     </div> 
 
     <div class="homethumb"> 
 
      <img src="http://placehold.it/250x250"> 
 
      <h2>Start here with the basics</h2> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

당신은 플렉스 시도해야합니다!

#homethumbs { 
    width: 100%; 
    text-align: center; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-flow: wrap; 
    -webkit-flex-flow: wrap; 
    flex-flow: wrap; 
} 

.homethumb { 
     flex: 0 0 50%; 
    -webkit-flex: 0 0 50%; 
    -ms-flex: 0 0 50%; 
} 

@media (min-width: 1000px){ 

    .homethumb { 
     flex: 0 0 25%; 
    -webkit-flex: 0 0 25%; 
    -ms-flex: 0 0 25%; 
    } 

} 

뷰포트 메타 태그를 넣는 것을 잊지 마십시오. 다음은이 결과의 비디오입니다. http://www.screencast.com/t/lYV6tFvhn9

Answer 3

동일 장치 및 소형 장치에 대해 flex를 사용할 수 있습니다. 각 div의 너비를 50 %로 설정하고 flex-wrap을 설정할 수 있습니다.이 랩으로 2 * 2 그리드를 얻을 수 있습니다

확인이 조각은

#homethumbs { 
 
    display: flex; 
 
} 
 
@media (min-width: 200px) and (max-width: 1000px) { 
 
    #homethumbs { 
 
    flex-wrap: wrap; 
 
    width: 100vw; 
 
    border: 1px solid; 
 
    } 
 
    .homethumb { 
 
    width: 50vw; 
 
    } 
 
}

<div id="homethumbs"> 
 
    <div class="homethumb"> 
 
    <img src="http://placehold.it/250x250"> 
 
    <h2>Start here with the basics</h2> 
 
    </div> 
 

 

 

 

 

 
    <div class="homethumb"> 
 
    <img src="http://placehold.it/250x250"> 
 
    <h2>Start here with the basics</h2> 
 
    </div> 
 

 

 

 
    <div class="homethumb"> 
 
    <img src="http://placehold.it/250x250"> 
 
    <h2>Start here with the basics</h2> 
 
    </div> 
 

 

 

 
    <div class="homethumb"> 
 
    <img src="http://placehold.it/250x250"> 
 
    <h2>Start here with the basics</h2> 
 
    </div> 
 
</div>

희망이

가