div를 반응 적으로 만들고 뉴스를 표시하기 위해 스타일을 지정합니다.

Question

두 개의 div가 서로 옆에 있다면. 브라우저의 크기를 조정할 때 어떻게 서로 가도록 만들 수 있습니까? 지금까지 나는이 예제를 서로 옆에있는 두 개의 div 인 stackoverflow에서 발견했습니다. 브라우저 크기를 조정할 때 어떻게 서로를 아래에 둘 수 있습니까?

#parent { 
 
    display: flex; 
 
} 
 

 
#narrow { 
 
    width: 200px; 
 
    background: lightblue; 
 
    /* Just so it's visible */ 
 
} 
 

 
#wide { 
 
    flex: 1; 
 
    /* Grow to rest of container */ 
 
    background: lightgreen; 
 
    /* Just so it's visible */ 
 
}

<div id="parent"> 
 
    <div id="wide">Wide (rest of width)</div> 
 
    <div id="narrow">Narrow (200px)</div> 
 
</div>

Answer 1

당신은 간단하게 다음과 같이 미디어 쿼리를 사용할 수 있습니다

#parent { 
 
    display: flex; 
 
} 
 

 
#narrow { 
 
    width: 200px; 
 
    background: lightblue; 
 
    /* Just so it's visible */ 
 
} 
 

 
#wide { 
 
    flex: 1; 
 
    /* Grow to rest of container */ 
 
    background: lightgreen; 
 
    /* Just so it's visible */ 
 
} 
 

 
@media all and (max-width:800px) { 
 
    #wide, 
 
    #narrow { 
 
    flex: 0 0 100%; 
 
    } 
 
    #parent { 
 
    flex-wrap: wrap; 
 
    } 
 
}

<div id="parent"> 
 
    <div id="wide">Wide (rest of width)</div> 
 
    <div id="narrow">Narrow (200px)</div> 
 
</div>

간단히 (내가 보여 그것을 사용 당신이 필요로 값 800 픽셀을 변경 결과는 여기)