響應式圖像和文字 Div 並排

Question

所以我試著建立一個模板，其中一個 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 和圖片的寬度和高度，但要么它沒有幫助，要么我會進一步破壞整個事情。如果有人可以幫助我看到我的錯誤，我將非常感激。

Answer 1

grid 來救援：

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))

將為容器的每個子層級建立一個網格列，只要它們可以拉伸到400px寬度。當沒有足夠的空間容納寬度為 400px 的網格項時，它們將換行成一列。只需將 px 值交換為您想要的任何值。

grid-auto-rows: 1fr 會讓兩列的高度相等。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  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%;
  }

  

  
Lorem ipsum 
 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.