두 스타일의 div가 서로 옆에 있음 [flexbox/responsive]

Question

나는 내 포트폴리오 웹 사이트에서 작업 중이며 문제가 있습니다. 나는 텍스트와 이미지로 서로 옆에 서있는 두 div를 만들려고합니다. 이것은 쉽지만 flexbox를 사용하면 반응이 좋지 않습니다. 코드 (나는 바로 그것을 얻을하지 않기 때문에, 인 flexbox없이) 내가 이것을 사용

This is what I try to achieve with flexbox, but this is just with plain html and css

:

#best_cases { 
 
    height : 800px; 
 
} 
 

 
#first_case { 
 
    width   : 650px; 
 
    height  : 577px; 
 
    float   : left; 
 
    margin  : 95px 0 0 211px; 
 
    border-radius : 5px 5px 0px 5px; 
 
    background : #1f2930; 
 
} 
 

 
#first_case h2 { 
 
    margin-left : 67px; 
 
    padding-top : 20px; 
 
    color  : #ffffff; 
 
    font-family : montserrat bold, 
 
       arial, 
 
       verdana; 
 
    font-size : 2.5em; 
 
    /* 40/16 */ 
 
} 
 

 
#first_case p { 
 
    margin-left : 67px; 
 
    padding-top : 8px; 
 
    color  : #ffffff; 
 
    font-family : montserrat light, 
 
       arial, 
 
       verdana; 
 
    font-size : 1.125em; 
 
    line-height : 26px; 
 
    /* 18/16 */ 
 
} 
 

 
#first_case img { 
 
    margin-top     : 72.6px; 
 
    margin-left    : 70px; 
 
    border-bottom-right-radius : 5px; 
 
} 
 

 
#second_case { 
 
    width   : 650px; 
 
    height  : 577px; 
 
    float   : left; 
 
    margin  : 95px 0 0 191px; 
 
    border-radius : 5px; 
 
    background : #1f2930; 
 
} 
 

 
#second_case h2 { 
 
    margin-right : 67px; 
 
    padding-top : 20px; 
 
    color  : #ffffff; 
 
    text-align : right; 
 
    font-family : montserrat bold, 
 
       arial, 
 
       verdana; 
 
    font-size : 2.5em; 
 
    /* 40/16 */ 
 
} 
 

 
#second_case p { 
 
    margin-right : 67px; 
 
    padding-top : 8px; 
 
    color  : #ffffff; 
 
    text-align : right; 
 
    font-family : montserrat light, 
 
       arial, 
 
       verdana; 
 
    font-size : 1.125em; 
 
    line-height : 26px; 
 
    /* 18/16 */ 
 
} 
 

 
#second_case img { 
 
    margin-top    : 72.6px; 
 
    border-bottom-left-radius : 5px; 
 
}

<div id="best_cases"> 
 
\t \t \t <div id="first_case"> 
 
\t \t \t \t <h2>T3Qvi3w</h2> 
 
\t \t \t \t <p>Shop voor het kopen van <br /> 
 
\t \t \t \t \t smartphone accessoires.</p> 
 
\t \t \t \t <img src="img/TeQview_small.png" alt="" width="580" height="auto" /> 
 
\t \t \t </div> 
 

 
\t \t \t <div id="second_case"> 
 
\t \t \t \t <h2>Studieplaen</h2> 
 
\t \t \t \t \t <p>De nieuwste manier om <br /> 
 
\t \t \t \t \t te plannen.</p> 
 
\t \t \t \t \t <img src="img/Studieplanner_small.png" alt="" width="580" height="380px" /> 
 
\t \t \t </div> 
 
\t \t </a> 
 
\t </div>

지금 무엇을 너희들 희망 해야 할 것. 나는 매우 도움이 될 것이다.

미리 감사드립니다.

Answer 1

플렉스 박스는 유체 컨테이너이므로 고정 된 픽셀 너비를 요소에 적용하기 시작하면이를 깨뜨릴 것입니다. 플렉스 박스를 사용하면 패딩과 여백에 대한 백분율을 사용하고 폭을 제어하기 위해 플렉스 속성을 사용하여 유동성을 부여하는 것이 더 좋습니다.

예를 들어, 기본 설정은 있지만 플롯 상자에는 여백 및 여백에 대한 백분율, 맞춤, 정렬 및 크기 조절을위한 flex 속성을 사용합니다.

작곡시이 사이드 바이 사이드 레이아웃을 사용하면 콘텐츠가 작아 져서 컨테이너를 수정하지 않아서 디스플레이 문제가 발생할 수 있으므로 글꼴 크기를 제어하기 위해 미디어 쿼리를 추가하는 것이 좋습니다 . 고정 된 값을 사용하여

#best_cases { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: no-wrap; 
 
    width: 100%; 
 
} 
 

 
#first_case, 
 
#second_case { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    margin: 0; 
 
    padding: 0; 
 
    flex-grow: 0; 
 
    background: #1f2930; 
 
    border-radius: 5px; 
 
} 
 

 
#first_case { 
 
    text-align: left; 
 
    margin-right: 1%; 
 
} 
 

 
#second_case { 
 
    text-align: right; 
 
    margin-left: 1%; 
 

 
} 
 

 
#first_case h2, 
 
#second_case h2, 
 
#first_case p, 
 
#second_case p { 
 
    color  : #ffffff; 
 
    font-family : montserrat bold, 
 
       arial, 
 
       verdana; 
 
    font-size : 2.5em; 
 
    padding: 2% 10% 5% 10%; 
 
    /* 40/16 */ 
 
} 
 

 
#first_case h2, 
 
#second_case h2 { 
 
    font-size: 2.5em; 
 
    /* 40/16 */ 
 
} 
 

 
#first_case p, 
 
#second_case p { 
 
    font-size: 1.125em; 
 
    line-height: 26px; 
 
    /* 18/16 */ 
 
} 
 

 
#first_case img, 
 
#second_case img { 
 
    max-width: 585px; 
 
    height: auto; 
 
} 
 

 
#first_case img { 
 
    margin-left: 10%; 
 
    width: 90%; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 

 
#second_case p { 
 
    text-align: right; 
 
} 
 

 
#second_case img { 
 
    margin-right: 10%; 
 
    width: 90%; 
 
    border-bottom-left-radius: 5px; 
 
}

<div id="best_cases"> 
 
    <div id="first_case"> 
 
    <h2>Abcdefg</h2> 
 
    <p>Shop voor het kopen van smartphone accessoires.</p> 
 
    <img src="http://placehold.it/580x380" alt="" /> 
 
    </div> 
 
    <div id="second_case"> 
 
    <h2>Hijklmn</h2> 
 
    <p>Shop voor het kopen van smartphone accessoires.</p> 
 
    <img src="http://placehold.it/580x380" alt="" /> 
 
    </div> 
 
</div>

는