使用flexbox将图像放在div旁边

Question

我有这个图像和这个盒子，我正试图放在同一行。盒子里只会放一个标题和一些文本，但我似乎无法将它们放在同一行。我正在使用flexbox，我对此做了一些研究，但无法完全解决。这是代码：

#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}

<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>

我在容器内做了两个div，因为图像和文本将在框外。

Answer 1

也许.main{}中的display: flex;可以解决问题。

Answer 2

您应该将display:flex属性添加到主元素，并将flex:1属性添加到主要元素的两个子元素

#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;

justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}

<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>