所以我试图创建一个模板，其中一个 div 是图片，另一个是带背景的文本。现在我想让这个模板响应式，以便文本以特定的 px 宽度位于图片下方。通过 stackoverflow，我看到无数的帖子说你应该使用 Flexbox。我尝试过，但我无法完全正确。

所以在桌面上它应该看起来像这样：https://i.stack.imgur.com/HDehv.jpg 在智能手机上它应该跳到这里https://i.stack.imgur.com/D4VOh。 .jpg

我需要在两侧留有边距，至少在桌面版本上是这样。现在我的问题是，我的图片在我的网站上没有限制并且变得太大，正在发生自动切换到行（据我所知）。

我的代码在这里：https://jsfiddle.net/wqesp83a/

.container {
  display: inline-flex;
  border: 1px solid black;
  margin: 5%;
  width: 90%;
}

.flex-direction {
  flex-direction: row;
}

.div1 {
  display: flex;
  border-right: 1px solid black;
}

h {
  color: #90bd49;
  font-size: 30px;
}

p {
  color: #333333;
  font-size: 16px;
}

.div2 {
  display: flex;
  background-color: #fff;
  max-width: 50%;
  padding: 1%;
  background-color: #e3e3e3;
}

span {
  font-size: 16px;
  text-align: left;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
  .flex-direction {
    flex-direction: column;
  }
  .div1 {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid black;
  }
  .div2 {
    max-width: 100%;
  }
  .container {
    margin: 0%;
  }

<div class="container flex-direction">
  <div class="div1"><span><img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" width="100%" height="100%"  /></span></div>
  <div class="div2"><span><h>Lorem ipsum</h> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p> </span></div>
</div>

我试图限制 div 和图片的宽度和高度，但要么它没有帮助，要么我会进一步破坏整个事情。如果有人可以帮助我看到我的错误，我将非常感激。