img가 별도의 div에 있더라도

Question

이미지 위치 지정에 문제가 있습니다. 이봐 요, 한 div에 두 개의 기둥을 만들었습니다. 모두 50 % 너비입니다. 충분한 공간이 있어도 이미지가 두 번째 열에 나타나지 않는 이유는 무엇입니까? 두 번째 열로 이동하는 방법? .imgDiv

JsFiddle 속으로 : 당신이 display: flex.container로 설정 때문입니다 https://jsfiddle.net/awxsqLbc/

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
body {} .container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    font-size: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: lightblue 
 
} 
 
.content { 
 
    text-align: center; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    border-radius: 10px; 
 
    min-height: 50vh; 
 
    min-width: 70%; 
 
} 
 
.msgDiv { 
 
    width: 50%; 
 
} 
 
.imgDiv { 
 
    width: 50%; 
 
} 
 
.imgDiv img { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    <div class="content"> 
 

 
    <div class="msgDiv"> 
 
     <h1>Welcome.</h1> 
 
     <h2>Are you hungry? </h2> 
 
     <h3>Start</h3> 
 
    </div> 
 

 
    <div class="imgDiv"> 
 
     <img src="http://moderndogmagazine.com/sites/default/files/styles/blog_top_image/public/images/blogs/top_images/nb_seal_04_2.jpg?itok=DR7IOsFi" alt="" /> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

이 추가 작업을해야 ~. 내용 : 여기에

display:flex; 
align-items:center; 

바이올린 : https://jsfiddle.net/awxsqLbc/1/

Answer 2

하지 .content

갱신 코드와는

Answer 3

나는 당신의 문제에 대한 해결책을 발견했다. 그림이 텍스트 옆에 있도록하고 싶습니다. CSS에서 float 스타일을 사용해보십시오. 이 솔루션은 다른 답변보다 간단합니다.

시도해보십시오. 그것은 작동합니다 :

CSS :

.container { 
    width: 100vw; 
    height: 100vh; 
    font-size: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: lightblue 
} 
.content { 
    text-align: center; 
    background: rgba(0, 0, 0, 0.1); 
    border-radius: 10px; 
    min-height: 50vh; 
    min-width: 70%; 
} 

.msgDiv { 
    width: 50%; 
    margin:0; 
    float:left; 
} 

.imgDiv { 
    width: 50%; 
    float:right; 
} 

.imgDiv img { 
    width: 200px; 
    height: 200px; 
} 

HTML (이전 코드로 같은 HTML) :

<div class="container"> 
<div class="content"> 

<div class="msgDiv"> 
<h1>Welcome.</h1> 
<h2>Are you hungry? </h2> 
<h3>Start</h3> 
</div> 

<div class="imgDiv"> 
<img src="http://moderndogmagazine.com/sites/default/files/styles/blog_top_image/public/images/blogs/top_images/nb_seal_04_2.jpg?itok=DR7IOsFi" alt="" /> 
</div> 

</div> 
</div> 

Answer 4

당신의 컬럼에 추가

.msgDiv { 
    width: 50%; 
    float: left; 
} 

.imgDiv { 
    width: 50%; 
    float: left; 
}