imgが別のdivにあっても表示されない

Question

イメージの配置に問題があります。見て、私は1つのdivに2つの列を作った。それぞれ50％の幅を持っています。十分なスペースがあっても、2番目の列に画像が表示されないのはなぜですか？それを2列目に移動する方法は？ .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; 
}