div가 서로 지나갈 때 div 정렬을 변경합니다.

Question

div가 서로 지나치게 흐를 때 정렬을 변경하거나 창 크기가 조정될 때 "줄 바꿈"을 수행하는 순수 CSS 방식이 있는지 궁금합니다. 한 행에 두 개의 div가 있는데, 한 행은 다른 떠 다니는 오른쪽을 떠있었습니다. 더 작은 뷰포트에서는 스택되지만 왼쪽 및 오른쪽 정렬을 유지합니다. 나는이 바이올린과 같은 미디어 쿼리에 중심을 둘 수 있습니다 : https://jsfiddle.net/vrac/gcuekarx/,하지만 왼쪽 상자 내용의 길이가 가변적이어서 미디어 쿼리에 대한 중단 점 설정은 추측 일 뿐이므로 미디어 쿼리가 이상적이지 않습니다. 건배

HTML :

는

<div id="nav_row"> 
    <div id="left_box">Left box with variable content width xxxxxxxxxxxxx 
    </div> 
    <div id="right_box">Right box 

    </div> 
</div> 

CSS :

미디어 쿼리

#nav_row { 
    background: blue; 
    display: table; 
    width: 100%; 
    position: relative; 
} 

#left_box { 
    background: red; 
    display: block; 
    float: left; 
} 

#right_box { 
    background: green; 
    display: block; 
    text-align: right; 
    float: right; 
} 

: 정렬을 변경하는

제 생각에는

@media (min-width: 250px) and (max-width: 400px) { 
    #nav_row { 
    background: yellow; 
    } 
    #left_box { 
    background: purple; 
    float: none; 
    text-align: center; 
    } 
    #right_box { 
    background: teal; 
    float: none; 
    text-align: center; 
    } 
} 

Answer 1

에게 가장 쉬운 방법은 사용하기

인 flexbox

그것은 플렉스 랩을 사용하여 '랩'을 변경할 수 있도록 간단합니다.

당신은