我正在為我的網站制作一個圖像/文本框，我希望圖像留在文本的左邊，我只在旁邊放了1或2行文本: 它停留在圖像旁邊 然而，當我添加更多的文本時，整個文本跳到了底部。 這一切都跳到了底部

下面是它的CSS/HTML代碼:

HTML:

<div class="textBox">
  <img src="bg.jpg" class="textBoxImg">
  
  <div class="textBoxContent">
    <p class="textBoxTitle">Chicago</p>
    <p class="textBoxText">Here is more information about chicago!</p>
  </div>

</div>

CSS:

.textBox {
  background: white;
  padding: 8px;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 10px;
}

.textBoxContent {
  display: inline-block;
  vertical-align: top;
}

.textBoxTitle {
  font-size: 30px;
  line-height: 0px;
}

.textBoxText {
  font-size: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.textBoxImg {
  border-radius: 10px;
  max-width: 40%;
  height: auto;
}

我想知道如何解決這個問題，這樣換行符就可以把文本放在圖片的旁邊，而不是下面。

我知道這可能不是做這些事情的最有效的方式，如果這是一個非常簡單的問題，我也很抱歉，我仍然只是在學習，并被這個問題難住了。

將它添加到名為textBox的類中:

.textBox {
    display: flex;
    flex-direction: row;
    background: white;
    padding: 8px;
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 10px;
  }

簡化您的css...確保bg.jpg和你的html在同一個文件夾中。

.textBox {
  padding: 8px;
}

.textBoxContent {
  display: inline-block;
  height: 10px;
  width: 500px;
  vertical-align: top;
}

.textBoxImg {
  max-width: 40%;
}

<div class="textBox">
  <img src="bg.jpg" class="textBoxImg">
  <div class="textBoxContent">
    <a>Chicago</a>
    <p>Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!</p>
  </div>

</div>